Features email templates

Header + list items

Preview

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Hr,
  Html,
  Img,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const FeaturesListItems = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Features</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[26px] font-semibold text-gray-900">
                  Functional Style
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Combine practicality and style effortlessly with our
                  furniture, offering functional designs that enhance your
                  living space
                </Text>
              </Row>
            </Section>
            <Section className="mt-10">
              <Row>
                <Column className="align-baseline">
                  <Img src={`${baseUrl}/icon-1.png`} width="48" height="48" />
                </Column>
                <Column className="w-[85%]">
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Versatile Comfort
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] text-gray-500">
                    Experience ultimate comfort and versatility with our
                    furniture collection, designed to adapt to your
                    ever-changing needs.
                  </Text>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-4 w-full border border-solid border-gray-200" />
            <Section className="mt-10">
              <Row>
                <Column className="align-baseline">
                  <Img src={`${baseUrl}/icon-2.png`} width="48" height="48" />
                </Column>
                <Column className="w-[85%]">
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Luxurious Retreat
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] text-gray-500">
                    Transform your space into a haven of relaxation with our
                    indulgent furniture collection.
                  </Text>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default FeaturesListItems

Header + list items

Header + 4 paragraphs

/* eslint-disable react/no-unescaped-entities */
import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Html,
  Img,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const Features4Paragraphs = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Features4Paragraphs</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[26px] font-semibold text-gray-900">
                  Unleash Timeless Comfort in Your Home
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Elevate Your Space with Impeccable Quality, Versatile Styles,
                  and Personalised Service.
                </Text>
              </Row>
              <Row className="mt-4">
                <Column colSpan={1} className="w-[50%] pr-3 align-baseline">
                  <Img src={`${baseUrl}/icon-1.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Multifunctional Marvels
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    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} className="w-[50%] pl-3 align-baseline">
                  <Img src={`${baseUrl}/icon-2.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Impeccable Quality
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    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 and long-lasting performance.
                  </Text>
                </Column>
              </Row>
              <Row className="mt-8">
                <Column colSpan={1} className="w-[50%] pr-3 align-baseline">
                  <Img src={`${baseUrl}/icon-3.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Versatile Styles
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    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 and enhance your
                    interior décor.
                  </Text>
                </Column>
                <Column colSpan={1} className="w-[50%] pl-3 align-baseline">
                  <Img src={`${baseUrl}/icon-4.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Personalized Service
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    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>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Features4Paragraphs

Header + 4 paragraphs

Header + two columns paragraphs centered

Preview

Unlock code

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const Features4Paragraphs2Columns = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Features</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[26px] font-semibold text-gray-900">
                  Modern Comfort
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Experience contemporary bliss with our sleek and cozy
                  furniture collection, designed for optimal comfort and style
                </Text>
              </Row>
              <Row className="mt-4">
                <Column align="center" className="w-[50%] pr-3 align-baseline">
                  <Img src={`${baseUrl}/icon-1.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Timeless Beauty
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Indulge in the enduring beauty of our furniture pieces,
                    crafted with exquisite attention to detail and timeless
                    design
                  </Text>
                </Column>
                <Column align="center" className="w-[50%] pl-3 align-baseline">
                  <Img src={`${baseUrl}/icon-2.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Effortless Function
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Discover furniture that seamlessly combines form and
                    function, making everyday living a breeze with its
                    practicality
                  </Text>
                </Column>
              </Row>
              <Row className="mt-10">
                <Column align="center" className="w-[50%] pr-3 align-baseline">
                  <Img src={`${baseUrl}/icon-3.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Customize Your Space
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Personalize your living environment with our customizable
                    furniture options, allowing you to tailor your space to
                    perfection
                  </Text>
                </Column>
                <Column align="center" className="w-[50%] pl-3 align-baseline">
                  <Img src={`${baseUrl}/icon-4.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Outdoor Serenity
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Create a tranquil outdoor retreat with our premium outdoor
                    furniture, offering both durability and serene relaxation
                  </Text>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Features4Paragraphs2Columns

Header + two columns paragraphs centered

Header + 3 paragraphs centered

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Html,
  Img,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const Features3ParagraphsCentered = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Features3ParagraphsCentered</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[26px] font-semibold text-gray-900">
                  Modern Comfort
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Experience contemporary bliss with our sleek and cozy
                  furniture collection, designed for optimal comfort and style
                </Text>
              </Row>
              <Row className="mt-4">
                <Column align="center" className="w-[33%] pr-3 align-baseline">
                  <Img src={`${baseUrl}/icon-1.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Timeless Charm
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Classic designs that never go out of style. Experience
                    enduring elegance
                  </Text>
                </Column>
                <Column align="center" className="w-[33%] pl-3 align-baseline">
                  <Img src={`${baseUrl}/icon-2.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Functional Beauty
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Seamlessly blending form and function. Furniture that
                    enhances your everyday life.
                  </Text>
                </Column>
                <Column align="center" className="w-[33%] pl-3 align-baseline">
                  <Img src={`${baseUrl}/icon-3.png`} width="48" height="48" />
                  <Text className="m-0 mt-4 text-xl font-semibold text-gray-900">
                    Endless Comfort
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Sink into pure relaxation. Discover furniture that embraces
                    your well-being.
                  </Text>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Features3ParagraphsCentered

Header + 3 paragraphs centered

Header + numbered list items

Preview

Unlock code

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Hr,
  Html,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

export const FeaturesListItemsNumber = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Features</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[26px] font-semibold text-gray-900">
                  Functional Style
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Combine practicality and style effortlessly with our
                  furniture, offering functional designs that enhance your
                  living space
                </Text>
              </Row>
            </Section>
            <Section className="mt-10">
              <Row>
                <Column className="align-baseline">
                  <div className="relative h-10 w-10 rounded-full bg-indigo-200 text-center">
                    <Text className="p-2 font-semibold text-indigo-600">1</Text>
                  </div>
                </Column>
                <Column className="w-[90%]">
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Versatile Comfort
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] text-gray-500">
                    Experience ultimate comfort and versatility with our
                    furniture collection, designed to adapt to your
                    ever-changing needs.
                  </Text>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-6 w-full border border-solid border-gray-200" />
            <Section>
              <Row>
                <Column className="align-baseline">
                  <div className="relative h-10 w-10 rounded-full bg-indigo-200 text-center">
                    <Text className="p-2 font-semibold text-indigo-600">2</Text>
                  </div>
                </Column>
                <Column className="w-[90%]">
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Luxurious Retreat
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] text-gray-500">
                    Transform your space into a haven of relaxation with our
                    indulgent furniture collection.
                  </Text>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-6 w-full border border-solid border-gray-200" />
            <Section>
              <Row>
                <Column className="align-baseline">
                  <div className="relative h-10 w-10 rounded-full bg-indigo-200 text-center">
                    <Text className="p-2 font-semibold text-indigo-600">3</Text>
                  </div>
                </Column>
                <Column className="w-[90%]">
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Unleash Creativity
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] text-gray-500">
                    Unleash your inner designer with our customizable furniture
                    options, allowing you to create a space that reflects your
                    unique vision
                  </Text>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-6 w-full border border-solid border-gray-200" />
            <Section>
              <Row>
                <Column className="align-baseline">
                  <div className="relative h-10 w-10 rounded-full bg-indigo-200 text-center">
                    <Text className="p-2 font-semibold text-indigo-600">4</Text>
                  </div>
                </Column>
                <Column className="w-[90%]">
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Elevate Outdoor Living
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] text-gray-500">
                    Take your outdoor space to new heights with our premium
                    outdoor furniture, designed to elevate your alfresco
                    experience.
                  </Text>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default FeaturesListItemsNumber