# Features

> Feature components for showcasing key features with headers, lists, and columns.

Web: https://react.email/components/features

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Header and list items

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-and-list-items

### Tailwind

```tsx
<Section className="my-[16px]">
  <Section>
    <Row>
      <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
        Functional Style
      </Text>
      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
        Combine practicality and style effortlessly with our furniture,
        offering functional designs that enhance your living space.
      </Text>
    </Row>
  </Section>
  <Section>
    <Hr className="!border-gray-300 mx-0 my-[32px] w-full border border-solid" />
    <Section>
      <Row>
        <Column className="align-baseline">
          <Img
            alt="heart icon"
            height="48"
            src="/static/heart-icon.png"
            width="48"
          />
        </Column>
        <Column className="w-[85%]">
          <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
            Versatile Comfort
          </Text>
          <Text className="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
            Experience ultimate comfort and versatility with our furniture
            collection, designed to adapt to your ever-changing needs.
          </Text>
        </Column>
      </Row>
    </Section>
    <Hr className="!border-gray-300 mx-0 my-[32px] w-full border border-solid" />
    <Section>
      <Row>
        <Column className="align-baseline">
          <Img
            alt="rocket icon"
            height="48"
            src="/static/rocket-icon.png"
            width="48"
          />
        </Column>
        <Column className="w-[85%]">
          <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
            Luxurious Retreat
          </Text>
          <Text className="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
            Transform your space into a haven of relaxation with our indulgent
            furniture collection.
          </Text>
        </Column>
      </Row>
    </Section>
    <Hr className="!border-gray-300 mx-0 my-[32px] w-full border border-solid" />
  </Section>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Section>
    <Row>
      <Text
        style={{
          margin: '0px',
          fontSize: 24,
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Functional Style
      </Text>
      <Text
        style={{
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Combine practicality and style effortlessly with our furniture,
        offering functional designs that enhance your living space.
      </Text>
    </Row>
  </Section>
  <Section>
    <Hr
      style={{
        marginLeft: '0px',
        marginRight: '0px',
        marginTop: 32,
        marginBottom: 32,
        width: '100%',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'rgb(209,213,219) !important',
      }}
    />
    <Section>
      <Row>
        <Column style={{ verticalAlign: 'baseline' }}>
          <Img
            alt="heart icon"
            height="48"
            src="/static/heart-icon.png"
            width="48"
          />
        </Column>
        <Column style={{ width: '85%' }}>
          <Text
            style={{
              margin: '0px',
              fontSize: 20,
              fontWeight: 600,
              lineHeight: '28px',
              color: 'rgb(17,24,39)',
            }}
          >
            Versatile Comfort
          </Text>
          <Text
            style={{
              margin: '0px',
              marginTop: 8,
              fontSize: 16,
              lineHeight: '24px',
              color: 'rgb(107,114,128)',
            }}
          >
            Experience ultimate comfort and versatility with our furniture
            collection, designed to adapt to your ever-changing needs.
          </Text>
        </Column>
      </Row>
    </Section>
    <Hr
      style={{
        marginLeft: '0px',
        marginRight: '0px',
        marginTop: 32,
        marginBottom: 32,
        width: '100%',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'rgb(209,213,219) !important',
      }}
    />
    <Section>
      <Row>
        <Column style={{ verticalAlign: 'baseline' }}>
          <Img
            alt="rocket icon"
            height="48"
            src="/static/rocket-icon.png"
            width="48"
          />
        </Column>
        <Column style={{ width: '85%' }}>
          <Text
            style={{
              margin: '0px',
              fontSize: 20,
              fontWeight: 600,
              lineHeight: '28px',
              color: 'rgb(17,24,39)',
            }}
          >
            Luxurious Retreat
          </Text>
          <Text
            style={{
              margin: '0px',
              marginTop: 8,
              fontSize: 16,
              lineHeight: '24px',
              color: 'rgb(107,114,128)',
            }}
          >
            Transform your space into a haven of relaxation with our indulgent
            furniture collection.
          </Text>
        </Column>
      </Row>
    </Section>
    <Hr
      style={{
        marginLeft: '0px',
        marginRight: '0px',
        marginTop: 32,
        marginBottom: 32,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'rgb(209,213,219) !important',
      }}
    />
  </Section>
</Section>
```

## Header and numbered list items

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-and-numbered-list-items

### Tailwind

```tsx
<Section className="my-[16px]">
  <Section className="pb-[24px]">
    <Row>
      <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
        Functional Style
      </Text>
      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
        Combine practicality and style effortlessly with our furniture,
        offering functional designs that enhance your living space.
      </Text>
    </Row>
  </Section>
  {[
    {
      title: 'Versatile Comfort',
      description:
        'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.',
    },
    {
      title: 'Luxurious Retreat',
      description:
        'Transform your space into a haven of relaxation with our indulgent furniture collection.',
    },
    {
      title: 'Unleash Creativity',
      description:
        'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision',
    },
    {
      title: 'Elevate Outdoor Living',
      description:
        'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.',
    },
  ].map((feature, index) => (
    <Fragment key={feature.title}>
      <Hr className="!border-gray-300 m-0 w-full border border-solid" />
      <Section className="py-[24px]">
        <Row>
          <Column
            width="48"
            height="40"
            className="w-[40px] h-[40px] pr-[8px]"
            valign="baseline"
          >
            <Row width="40" align="left">
              <Column
                align="center"
                valign="middle"
                width="40"
                height="40"
                className="h-[40px] font-semibold w-[40px] rounded-full bg-indigo-200 text-indigo-600 p-0"
              >
                {index + 1}
              </Column>
            </Row>
          </Column>
          <Column width="100%" className="w-full">
            <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
              {feature.title}
            </Text>
            <Text className="m-0 pt-[8px] text-[16px] text-gray-500 leading-[24px]">
              {feature.description}
            </Text>
          </Column>
        </Row>
      </Section>
    </Fragment>
  ))}
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16 }}>
  <Section style={{ paddingBottom: 24 }}>
    <Row>
      <Text
        style={{
          margin: 0,
          fontWeight: 600,
          fontSize: 24,
          color: 'rgb(17,24,39)',
          lineHeight: '32px',
        }}
      >
        Functional Style
      </Text>
      <Text
        style={{
          marginTop: 8,
          fontSize: 16,
          color: 'rgb(107,114,128)',
          lineHeight: '24px',
        }}
      >
        Combine practicality and style effortlessly with our furniture,
        offering functional designs that enhance your living space.
      </Text>
    </Row>
  </Section>
  {[
    {
      title: 'Vesatile Comfort',
      description:
        'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.',
    },
    {
      title: 'Luxurious Retreat',
      description:
        'Transform your space into a haven of relaxation with our indulgent furniture collection.',
    },
    {
      title: 'Unleash Creativity',
      description:
        'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision',
    },
    {
      title: 'Elevate Outdoor Living',
      description:
        'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.',
    },
  ].map((feature, index) => (
    <Fragment key={feature.title}>
      <Hr
        style={{
          border: '1px solid rgb(209, 213, 219)',
          margin: 0,
          width: '100%',
        }}
      />
      <Section
        style={{
          paddingTop: 24,
          paddingBottom: 24,
        }}
      >
        <Row>
          <Column
            width="48"
            height="40"
            style={{
              width: 40,
              height: 40,
              paddingRight: 8,
            }}
            valign="baseline"
          >
            <Row width="40" align="left">
              <Column
                align="center"
                height="40"
                style={{
                  backgroundColor: 'rgb(199, 210, 254)',
                  borderRadius: '9999px',
                  color: 'rgb(79, 70, 229)',
                  fontWeight: 600,
                  height: 40,
                  padding: 0,
                  width: 40,
                }}
                valign="middle"
                width="40"
              >
                {index + 1}
              </Column>
            </Row>
          </Column>
          <Column width="100%" style={{ width: '100%' }}>
            <Text
              style={{
                margin: 0,
                fontWeight: 600,
                fontSize: 20,
                lineHeight: '28px',
                color: 'rgb(17, 24, 39)',
              }}
            >
              {feature.title}
            </Text>
            <Text
              style={{
                margin: 0,
                fontWeight: 600,
                paddingTop: 8,
                fontSize: 16,
                lineHeight: '24px',
                color: 'rgb(107, 114, 128)',
              }}
            >
              {feature.description}
            </Text>
          </Column>
        </Row>
      </Section>
    </Fragment>
  ))}
</Section>
```

## Header and four paragraphs

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-and-four-paragraphs

### Tailwind

```tsx
<Section className="my-[16px]">
  <Row>
    <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
      Unleash Timeless Comfort in Your Home
    </Text>
    <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
      Elevate your space with impeccable quality, and versatile styles.
    </Text>
  </Row>
  <Row className="mt-[16px]">
    <Column className="w-1/2 pr-[12px] align-baseline" colSpan={1}>
      <Img
        alt="heart icon"
        height="48"
        src="/static/heart-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
        Multifunctional Marvels
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Discover comfort and style with our exquisite furniture collection at
        Acme. Transform your living space into a haven of timeless comfort
        with our range of plush sofas, elegant dining sets, cozy armchairs,
        and functional storage solutions.
      </Text>
    </Column>
    <Column className="w-1/2 pl-[12px] align-baseline" colSpan={1}>
      <Img
        alt="rocket icon"
        height="48"
        src="/static/rocket-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
        Impeccable Quality
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Quality is our priority. Our furniture is meticulously crafted by
        skilled artisans, ensuring durability and elegance. From solid wood
        frames to carefully selected upholstery fabrics, each piece is
        thoughtfully designed to deliver unmatched quality.
      </Text>
    </Column>
  </Row>
  <Row className="mt-[32px]">
    <Column className="w-1/2 pr-[12px] align-baseline" colSpan={1}>
      <Img
        alt="megaphone icon"
        height="48"
        src="/static/megaphone-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
        Versatile Styles
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Express your unique style with our diverse range of furniture options.
        Whether you prefer contemporary minimalism, rustic charm, or timeless
        elegance, our selection offers something to complement every taste.
        Choose from sleek modern lines to ornate detailing.
      </Text>
    </Column>
    <Column className="w-1/2 pl-[12px] align-baseline" colSpan={1}>
      <Img
        alt="cube icon"
        height="48"
        src="/static/cube-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
        Personalized Service
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Experience personalised service at Acme. Our friendly team is
        dedicated to assisting you in finding the perfect furniture pieces.
        From fabric selection to space planning, we're here to ensure your
        complete satisfaction. Indulge in the luxury of personalised furniture
        shopping.
      </Text>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Row>
    <Text
      style={{
        margin: '0px',
        fontSize: 24,
        lineHeight: '32px',
        fontWeight: 600,
        color: 'rgb(17,24,39)',
      }}
    >
      Unleash Timeless Comfort in Your Home
    </Text>
    <Text
      style={{
        marginTop: 8,
        fontSize: 16,
        lineHeight: '24px',
        color: 'rgb(107,114,128)',
      }}
    >
      Elevate your space with impeccable quality, and versatile styles.
    </Text>
  </Row>
  <Row style={{ marginTop: 16 }}>
    <Column
      colSpan={1}
      style={{
        width: '50%',
        paddingRight: 12,
        verticalAlign: 'baseline',
      }}
    >
      <Img
        alt="heart icon"
        height="48"
        src="/static/heart-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Multifunctional Marvels
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Discover comfort and style with our exquisite furniture collection at
        Acme. Transform your living space into a haven of timeless comfort
        with our range of plush sofas, elegant dining sets, cozy armchairs,
        and functional storage solutions.
      </Text>
    </Column>
    <Column
      colSpan={1}
      style={{ paddingLeft: 12, verticalAlign: 'baseline', width: '50%' }}
    >
      <Img
        alt="rocket icon"
        height="48"
        src="/static/rocket-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Impeccable Quality
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Quality is our priority. Our furniture is meticulously crafted by
        skilled artisans, ensuring durability and elegance. From solid wood
        frames to carefully selected upholstery fabrics, each piece is
        thoughtfully designed to deliver unmatched quality.
      </Text>
    </Column>
  </Row>
  <Row style={{ marginTop: 32 }}>
    <Column
      colSpan={1}
      style={{
        width: '50%',
        paddingRight: 12,
        verticalAlign: 'baseline',
      }}
    >
      <Img
        alt="megaphone icon"
        height="48"
        src="/static/megaphone-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Versatile Styles
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Express your unique style with our diverse range of furniture options.
        Whether you prefer contemporary minimalism, rustic charm, or timeless
        elegance, our selection offers something to complement every taste.
        Choose from sleek modern lines to ornate detailing.
      </Text>
    </Column>
    <Column
      colSpan={1}
      style={{ width: '50%', paddingLeft: 12, verticalAlign: 'baseline' }}
    >
      <Img
        alt="cube icon"
        height="48"
        src="/static/cube-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Personalized Service
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Experience personalised service at Acme. Our friendly team is
        dedicated to assisting you in finding the perfect furniture pieces.
        From fabric selection to space planning, we're here to ensure your
        complete satisfaction. Indulge in the luxury of personalised furniture
        shopping.
      </Text>
    </Column>
  </Row>
</Section>
```

## Header, four paragraphs and two columns

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-and-four-paragraphs-and-two-columns

### Tailwind

```tsx
<Section className="my-[16px]">
  <Row>
    <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
      Modern Comfort
    </Text>
    <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
      Experience contemporary bliss with our sleek and cozy furniture
      collection, designed for optimal comfort and style
    </Text>
  </Row>
  <table width="100%">
    <tr className="mt-[16px] w-full">
      <td align="center" className="w-1/2 pr-[12px] align-baseline">
        <Img
          alt="heart icon"
          height="48"
          src="/static/heart-icon.png"
          width="48"
        />
        <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
          Timeless Beauty
        </Text>
        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Indulge in the enduring beauty of our furniture pieces, crafted with
          exquisite attention to detail and timeless design
        </Text>
      </td>
      <td align="center" className="w-1/2 pr-[12px] align-baseline">
        <Img
          alt="rocket icon"
          height="48"
          src="/static/rocket-icon.png"
          width="48"
        />
        <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
          Effortless Function
        </Text>
        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Discover furniture that seamlessly combines form and function,
          making everyday living a breeze with its practicality
        </Text>
      </td>
    </tr>
    <tr className="mt-[16px] w-full">
      <td align="center" className="w-1/2 pr-[12px] align-baseline">
        <Img
          alt="megaphone icon"
          height="48"
          src="/static/megaphone-icon.png"
          width="48"
        />
        <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
          Customize Your Space
        </Text>
        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Personalize your living environment with our customizable furniture
          options, allowing you to tailor your space to perfection
        </Text>
      </td>
      <td align="center" className="w-1/2 pr-[12px] align-baseline">
        <Img
          alt="cube icon"
          height="48"
          src="/static/cube-icon.png"
          width="48"
        />
        <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
          Outdoor Serenity
        </Text>
        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Create a tranquil outdoor retreat with our premium outdoor
          furniture, offering both durability and serene relaxation
        </Text>
      </td>
    </tr>
  </table>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Row>
    <Text
      style={{
        margin: '0px',
        fontSize: 24,
        lineHeight: '32px',
        fontWeight: 600,
        color: 'rgb(17,24,39)',
      }}
    >
      Modern Comfort
    </Text>
    <Text
      style={{
        marginTop: 8,
        fontSize: 16,
        lineHeight: '24px',
        color: 'rgb(107,114,128)',
      }}
    >
      Experience contemporary bliss with our sleek and cozy furniture
      collection, designed for optimal comfort and style
    </Text>
  </Row>
  <table width="100%">
    <tr style={{ width: '100%', marginTop: 16 }}>
      <td
        align="center"
        style={{
          width: '50%',
          paddingRight: 12,
          verticalAlign: 'baseline',
        }}
      >
        <Img
          alt="heart icon"
          height="48"
          src="/static/heart-icon.png"
          width="48"
        />
        <Text
          style={{
            margin: '0px',
            marginTop: 16,
            fontSize: 20,
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }}
        >
          Timeless Beauty
        </Text>
        <Text
          style={{
            marginBottom: '0px',
            marginTop: 8,
            fontSize: 16,
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }}
        >
          Indulge in the enduring beauty of our furniture pieces, crafted with
          exquisite attention to detail and timeless design
        </Text>
      </td>
      <td
        align="center"
        style={{
          width: '50%',
          paddingRight: 12,
          verticalAlign: 'baseline',
        }}
      >
        <Img
          alt="rocket icon"
          height="48"
          src="/static/rocket-icon.png"
          width="48"
        />
        <Text
          style={{
            margin: '0px',
            marginTop: 16,
            fontSize: 20,
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }}
        >
          Effortless Function
        </Text>
        <Text
          style={{
            marginBottom: '0px',
            marginTop: 8,
            fontSize: 16,
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }}
        >
          Discover furniture that seamlessly combines form and function,
          making everyday living a breeze with its practicality
        </Text>
      </td>
    </tr>
    <tr style={{ width: '100%', marginTop: 16 }}>
      <td
        align="center"
        style={{
          width: '50%',
          paddingRight: 12,
          verticalAlign: 'baseline',
        }}
      >
        <Img
          alt="megaphone icon"
          height="48"
          src="/static/megaphone-icon.png"
          width="48"
        />
        <Text
          style={{
            margin: '0px',
            marginTop: 16,
            fontSize: 20,
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }}
        >
          Customize Your Space
        </Text>
        <Text
          style={{
            marginBottom: '0px',
            marginTop: 8,
            fontSize: 16,
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }}
        >
          Personalize your living environment with our customizable furniture
          options, allowing you to tailor your space to perfection
        </Text>
      </td>
      <td
        align="center"
        style={{
          width: '50%',
          paddingRight: 12,
          verticalAlign: 'baseline',
        }}
      >
        <Img
          alt="cube icon"
          height="48"
          src="/static/cube-icon.png"
          width="48"
        />
        <Text
          style={{
            margin: '0px',
            marginTop: 16,
            fontSize: 20,
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }}
        >
          Outdoor Serenity
        </Text>
        <Text
          style={{
            marginBottom: '0px',
            marginTop: 8,
            fontSize: 16,
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }}
        >
          Create a tranquil outdoor retreat with our premium outdoor
          furniture, offering both durability and serene relaxation
        </Text>
      </td>
    </tr>
  </table>
</Section>
```

## Header and three centered paragraphs

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-and-three-centered-paragraphs

### Tailwind

```tsx
<Section className="my-[16px]">
  <Row>
    <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
      Modern Comfort
    </Text>
    <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
      Experience contemporary bliss with our sleek and cozy furniture
      collection, designed for optimal comfort and style
    </Text>
  </Row>
  <Row className="mt-[16px]">
    <Column align="center" className="w-1/3 pr-[12px] align-baseline">
      <Img
        alt="heart icon"
        height="48"
        src="/static/heart-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[24px]">
        Timeless Charm
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Classic designs that never go out of style. Experience enduring
        elegance
      </Text>
    </Column>
    <Column align="center" className="w-1/3 pl-[12px] align-baseline">
      <Img
        alt="rocket icon"
        height="48"
        src="/static/rocket-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
        Functional Beauty
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Seamlessly blending form and function. Furniture that enhances your
        everyday life.
      </Text>
    </Column>
    <Column align="center" className="w-1/3 pl-[12px] align-baseline">
      <Img
        alt="megaphone icon"
        height="48"
        src="/static/megaphone-icon.png"
        width="48"
      />
      <Text className="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]">
        Endless Comfort
      </Text>
      <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
        Sink into pure relaxation. Discover furniture that embraces your
        well-being.
      </Text>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section
  style={{
    marginTop: 16,
    marginBottom: 16,
  }}
>
  <Row>
    <Text
      style={{
        margin: '0px',
        fontSize: 24,
        lineHeight: '32px',
        fontWeight: 600,
        color: 'rgb(17,24,39)',
      }}
    >
      Modern Comfort
    </Text>
    <Text
      style={{
        marginTop: 8,
        fontSize: 16,
        lineHeight: '24px',
        color: 'rgb(107,114,128)',
      }}
    >
      Experience contemporary bliss with our sleek and cozy furniture
      collection, designed for optimal comfort and style
    </Text>
  </Row>
  <Row style={{ marginTop: 16 }}>
    <Column
      align="center"
      style={{
        width: '33.333333%',
        paddingRight: 12,
        verticalAlign: 'baseline',
      }}
    >
      <Img
        alt="heart icon"
        height="48"
        src="/static/heart-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Timeless Charm
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Classic designs that never go out of style. Experience enduring
        elegance
      </Text>
    </Column>
    <Column
      align="center"
      style={{
        width: '33.333333%',
        paddingLeft: 12,
        verticalAlign: 'baseline',
      }}
    >
      <Img
        alt="rocket icon"
        height="48"
        src="/static/rocket-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Functional Beauty
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Seamlessly blending form and function. Furniture that enhances your
        everyday life.
      </Text>
    </Column>
    <Column
      align="center"
      style={{
        width: '33.333333%',
        paddingLeft: 12,
        verticalAlign: 'baseline',
      }}
    >
      <Img
        alt="megaphone icon"
        height="48"
        src="/static/megaphone-icon.png"
        width="48"
      />
      <Text
        style={{
          margin: '0px',
          marginTop: 16,
          fontSize: 20,
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Endless Comfort
      </Text>
      <Text
        style={{
          marginBottom: '0px',
          marginTop: 8,
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Sink into pure relaxation. Discover furniture that embraces your
        well-being.
      </Text>
    </Column>
  </Row>
</Section>
```