Articles examples email templates

Articles

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 Articles = () => {
  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>Articles</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 rounded-xl bg-blue-500">
              <div className="bottom-0 left-0 right-0 top-10 mx-auto my-auto p-10">
                <Text className="m-0 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 bg-indigo-600 px-10 py-3 font-semibold text-white"
                  href="#"
                >
                  Explore
                </Button>
              </div>
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <Section>
              <Row className="mt-8">
                <Text className="m-0 text-xl font-semibold text-gray-900">
                  Versatile Comfort
                </Text>
                <Text className="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>
                <Link className="text-indigo-600 underline" href="#">
                  Read more
                </Link>
              </Row>
              <Row className="mt-8">
                <Text className="m-0 text-xl font-semibold text-gray-900">
                  Versatile Comfort
                </Text>
                <Text className="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>
                <Link className="text-indigo-600 underline" href="#">
                  Read more
                </Link>
              </Row>
              <Row className="mt-8">
                <Text className="m-0 text-xl font-semibold text-gray-900">
                  Versatile Comfort
                </Text>
                <Text className="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>
                <Link className="text-indigo-600 underline" href="#">
                  Read more
                </Link>
              </Row>
              <Row className="mt-8">
                <Text className="m-0 text-xl font-semibold text-gray-900">
                  Versatile Comfort
                </Text>
                <Text className="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>
                <Link className="text-indigo-600 underline" href="#">
                  Read more
                </Link>
              </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 Articles

Article + features

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 ArticleFeatures = () => {
  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>ArticleFeatures</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>
              <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="h-[320px] w-full rounded-xl object-cover"
              />
              <Section className="mt-8 text-center">
                <Text className="my-4 text-lg font-semibold text-indigo-600">
                  Our new article
                </Text>
                <Heading
                  as="h1"
                  className="m-0 mt-2 text-4xl font-semibold text-gray-900"
                >
                  Designing with Furniture
                </Heading>
                <Text className="text-[16px] text-gray-500">
                  Unleash your inner designer as we explore how furniture plays
                  a vital role in creating stunning interiors, offering insights
                  into choosing the right pieces, arranging them harmoniously,
                  and infusing your space with personality and style
                </Text>
                <Button
                  className="mt-4 rounded-lg bg-indigo-600 px-10 py-3 font-semibold text-white"
                  href="#"
                >
                  Read more
                </Button>
              </Section>
            </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">
                  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>
            <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 ArticleFeatures

Video

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 Video = () => {
  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>Video</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">
              <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="h-[320px] w-full rounded-xl object-cover"
              />
            </Section>
            <Hr className="mx-0 my-10 w-full border border-solid border-gray-200" />
            <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">
                  <div className="relative h-12 w-12 rounded-full bg-indigo-200">
                    <Img src={`${baseUrl}/icon-3.png`} width="48" height="48" />
                  </div>
                  <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>
            <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 Video