Features examples email templates

Features

Preview

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 Features = () => {
  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 px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          width="36"
                          height="36"
                          className="ml-1"
                        />
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
            <Section className="mt-4">
              <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>
              <Row className="mt-16">
                <Column className="align-baseline">
                  <Img
                    src={`${baseUrl}/quote.png`}
                    className="mx-1"
                    width="45"
                    height="45"
                  />
                </Column>
                <Column className="w-[85%]">
                  <Text className="m-0 break-words text-lg italic text-gray-900">
                    Furniture is the silent witness to our lives, supporting us
                    through every chapter, and preserving the echoes of our
                    stories
                  </Text>
                  <Text className="text-[16px] font-semibold text-gray-900">
                    Author unknown
                  </Text>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <Section className="pb-10">
              <Row>
                <Column className="w-[45%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                  <Text className="my-2 text-[16px] font-semibold text-gray-900">
                    Acme corporation
                  </Text>
                  <Text className="mt-1 text-[16px] text-gray-500">
                    Think different
                  </Text>
                </Column>
                <Column align="left" className="table-cell align-bottom">
                  <Row className="table-cell h-[42px] w-[56px] align-bottom">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          className="-ml-1 mr-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                  </Row>
                  <Row>
                    <Text className="my-2 text-[16px] text-gray-500">
                      123 Main Street Anytown, CA 12345
                    </Text>
                    <Text className="mt-1 text-[16px] text-gray-500">
                      mail@example.com +123456789
                    </Text>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Features

Features

Features + Gallery

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 FeaturesWithGallery = () => {
  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>FeaturesWithGallery</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 px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          width="36"
                          height="36"
                          className="ml-1"
                        />
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
            <Section className="mt-4">
              <Row>
                <Text className="m-0 text-[16px] font-semibold text-indigo-600">
                  What's new
                </Text>
                <Text className="m-0 mt-2 text-[26px] font-semibold text-gray-900">
                  Functional Style
                </Text>
                <Img
                  src="https://images.unsplash.com/photo-1702470170564-22dd352f5b88?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  className="mt-6 h-[360px] w-full rounded-xl object-cover"
                />
              </Row>
              <Row className="mt-4">
                <Column className="w-[50%] align-baseline">
                  <Text className="text-lg font-semibold text-gray-900">
                    Effortless Elegance
                  </Text>
                </Column>
                <Column className="w-[50%]">
                  <Text className="text-gray-500">
                    Discover how to effortlessly infuse elegance into your space
                    with carefully curated furniture selections and design tips
                    that bring sophistication to every corner.
                  </Text>
                </Column>
              </Row>
            </Section>
            <Section className="mt-4">
              <Row>
                <Text className="m-0 text-[16px] font-semibold text-indigo-600">
                  What's new
                </Text>
                <Text className="m-0 mt-2 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-4">
              <Row>
                <Column className="w-[33%]">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?q=80&w=2898&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                      className="h-[186px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
                <Column className="w-[33%] pl-3">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1491933382434-500287f9b54b?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                      className="h-[186px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
                <Column className="w-[33%] pl-3">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1610824352934-c10d87b700cc?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                      className="h-[186px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <Section className="mt-10 pb-10">
              <Row>
                <Column className="w-[45%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                  <Text className="my-2 text-[16px] font-semibold text-gray-900">
                    Acme corporation
                  </Text>
                  <Text className="mt-1 text-[16px] text-gray-500">
                    Think different
                  </Text>
                </Column>
                <Column align="left" className="table-cell align-bottom">
                  <Row className="table-cell h-[42px] w-[56px] align-bottom">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          className="-ml-1 mr-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                  </Row>
                  <Row>
                    <Text className="my-2 text-[16px] text-gray-500">
                      123 Main Street Anytown, CA 12345
                    </Text>
                    <Text className="mt-1 text-[16px] text-gray-500">
                      mail@example.com +123456789
                    </Text>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default FeaturesWithGallery

Features + Gallery

Features + Hero

Preview

Unlock code

import {
  Body,
  Button,
  Column,
  Container,
  Font,
  Head,
  Heading,
  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 FeaturesWithHero = () => {
  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>FeaturesWithHero</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 px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          width="36"
                          height="36"
                          className="ml-1"
                        />
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
            <Section className="relative bg-blue-600">
              <div className="bottom-0 left-0 right-0 top-[20%] mx-auto my-auto p-10 text-center">
                <Text className="m-0 font-semibold text-white">
                  Modern Fusion
                </Text>
                <Heading className="m-0 mt-1 font-bold text-white" as="h1">
                  Timeless Classics
                </Heading>
                <Text className="m-0 mt-2 text-[16px] text-white">
                  Step into the world of timeless classics as we explore iconic
                  furniture pieces
                </Text>
                <Button
                  className="mt-4 rounded-lg border border-solid border-gray-200 bg-white px-10 py-3 font-semibold text-gray-900"
                  href="#"
                >
                  Explore
                </Button>
              </div>
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <Section className="mt-4">
              <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="40" height="40" />
                </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-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="40" height="40" />
                </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-10 w-full border border-solid border-gray-200" />
            <Section className="pb-10">
              <Row>
                <Column className="w-[45%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                  <Text className="my-2 text-[16px] font-semibold text-gray-900">
                    Acme corporation
                  </Text>
                  <Text className="mt-1 text-[16px] text-gray-500">
                    Think different
                  </Text>
                </Column>
                <Column align="left" className="table-cell align-bottom">
                  <Row className="table-cell h-[42px] w-[56px] align-bottom">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          className="-ml-1 mr-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                  </Row>
                  <Row>
                    <Text className="my-2 text-[16px] text-gray-500">
                      123 Main Street Anytown, CA 12345
                    </Text>
                    <Text className="mt-1 text-[16px] text-gray-500">
                      mail@example.com +123456789
                    </Text>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default FeaturesWithHero

Features + Hero

Features + preview images

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 FeaturesWithPreviewImages = () => {
  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>FeaturesWithPreviewImages</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 px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          width="36"
                          height="36"
                          className="ml-1"
                        />
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
            <Section className="mt-4">
              <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-[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-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="40" height="40" />
                </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>
            <Section className="mt-16">
              <Row>
                <Text className="m-0 text-[26px] font-semibold text-gray-900">
                  All features
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Introducing our latest feature: a real-time collaboration tool
                  that allows multiple users to work on the same document
                  simultaneously.
                </Text>
              </Row>
              <Row className="mt-4">
                <Column align="center" className="w-[50%] pr-3 align-baseline">
                  <Img
                    src="https://images.unsplash.com/photo-1627384113858-ce93ff568d1f?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="h-[120px] w-[120px] rounded-full object-cover"
                    alt="company-logo"
                  />
                  <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>
                  <Link href="#">
                    <Text className="text-[16px] text-indigo-600 underline">
                      Read more
                    </Text>
                  </Link>
                </Column>
                <Column align="center" className="w-[50%] pl-3 align-baseline">
                  <Img
                    src="https://images.unsplash.com/photo-1627384113858-ce93ff568d1f?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="h-[120px] w-[120px] rounded-full object-cover"
                    alt="company-logo"
                  />
                  <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>
                  <Link href="#">
                    <Text className="text-[16px] text-indigo-600 underline">
                      Read more
                    </Text>
                  </Link>
                </Column>
              </Row>
              <Row className="mt-10">
                <Column align="center" className="w-[50%] pr-3 align-baseline">
                  <Img
                    src="https://images.unsplash.com/photo-1627384113858-ce93ff568d1f?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="h-[120px] w-[120px] rounded-full object-cover"
                    alt="company-logo"
                  />
                  <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>
                  <Link href="#">
                    <Text className="text-[16px] text-indigo-600 underline">
                      Read more
                    </Text>
                  </Link>
                </Column>
                <Column align="center" className="w-[50%] pl-3 align-baseline">
                  <Img
                    src="https://images.unsplash.com/photo-1627384113858-ce93ff568d1f?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="h-[120px] w-[120px] rounded-full object-cover"
                    alt="company-logo"
                  />
                  <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>
                  <Link href="#">
                    <Text className="text-[16px] text-indigo-600 underline">
                      Read more
                    </Text>
                  </Link>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <Section className="pb-10">
              <Row>
                <Column className="w-[45%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                  <Text className="my-2 text-[16px] font-semibold text-gray-900">
                    Acme corporation
                  </Text>
                  <Text className="mt-1 text-[16px] text-gray-500">
                    Think different
                  </Text>
                </Column>
                <Column align="left" className="table-cell align-bottom">
                  <Row className="table-cell h-[42px] w-[56px] align-bottom">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          className="-ml-1 mr-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                  </Row>
                  <Row>
                    <Text className="my-2 text-[16px] text-gray-500">
                      123 Main Street Anytown, CA 12345
                    </Text>
                    <Text className="mt-1 text-[16px] text-gray-500">
                      mail@example.com +123456789
                    </Text>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default FeaturesWithPreviewImages

Features + preview images

Features + Testimonial

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 FeatureWithTestimonial = () => {
  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 px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          width="36"
                          height="36"
                          className="ml-1"
                        />
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
            <Section className="mt-4">
              <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="40" height="40" />
                </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-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="40" height="40" />
                </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>
            <Section className="mt-12 border-l-4 border-solid border-indigo-600 bg-indigo-200 px-6 py-7 text-indigo-600">
              <Text className=" m-0 break-words text-lg italic">
                Furniture is the silent witness to our lives, supporting us
                through every chapter, and preserving the echoes of our stories
              </Text>
              <Text className="m-0 mt-2 text-[16px] font-semibold">
                Author unknown
              </Text>
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <Section className="pb-10">
              <Row>
                <Column className="w-[45%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                  <Text className="my-2 text-[16px] font-semibold text-gray-900">
                    Acme corporation
                  </Text>
                  <Text className="mt-1 text-[16px] text-gray-500">
                    Think different
                  </Text>
                </Column>
                <Column align="left" className="table-cell align-bottom">
                  <Row className="table-cell h-[42px] w-[56px] align-bottom">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          className="-ml-1 mr-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          className="mx-1"
                          width="36"
                          height="36"
                        />
                      </Link>
                    </Column>
                  </Row>
                  <Row>
                    <Text className="my-2 text-[16px] text-gray-500">
                      123 Main Street Anytown, CA 12345
                    </Text>
                    <Text className="mt-1 text-[16px] text-gray-500">
                      mail@example.com +123456789
                    </Text>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default FeatureWithTestimonial