Articles email templates

Image as background

Preview

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

export const ImageAsBackground = () => {
  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>ImageAsBackground</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 className="relative h-[424px] rounded-xl bg-blue-600">
              <div className="bottom-0 left-0 right-0 top-[15%] mx-auto my-auto p-10 text-center">
                <Text className="m-0 font-semibold text-white">
                  New article
                </Text>
                <Heading className="m-0 mt-1 font-bold text-white" as="h1">
                  Artful Accents
                </Heading>
                <Text className="m-0 mt-2 text-[16px] text-white">
                  Uncover the power of accent furniture in transforming your
                  space with subtle touches of style, personality, and
                  functionality, as we explore the art of curating captivating
                  accents for a truly curated home
                </Text>
                <Button
                  className="mt-6 rounded-lg border border-solid border-gray-200 bg-white px-10 py-3 font-semibold text-gray-900"
                  href="#"
                >
                  Read more
                </Button>
              </div>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ImageAsBackground

Image as background

Hero image with button

Preview

Unlock code

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

export const HeroImageWithButton = () => {
  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 text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <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 products
                </Text>
                <Heading
                  as="h1"
                  className="m-0 mt-2 text-4xl font-semibold tracking-tight 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 w-full rounded-lg border border-solid border-gray-200 bg-white py-3 font-semibold text-gray-900"
                  href="#"
                >
                  Read more
                </Button>
              </Section>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default HeroImageWithButton

Hero image with button

4 articles rounded preview

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'

export const RoundedPreview = () => {
  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">
                  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>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default RoundedPreview

4 articles rounded preview

Article image right

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

export const ImageRight = () => {
  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 text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Column className="w-[50%] align-baseline">
                  <Text className="m-0 text-[16px] font-semibold text-indigo-600">
                    What's new
                  </Text>
                  <Text className="m-0 mt-2 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>
                </Column>
                <Column className="w-[50%] pl-8">
                  <Img
                    src="https://images.unsplash.com/photo-1611254666354-d75bfe3cadbc?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="h-[220px] w-[264px] rounded-lg object-cover"
                  />
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ImageRight

Article image right

Hero article image

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

export const HeroArticleImage = () => {
  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>Hero article image</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>
              <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>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default HeroArticleImage

Hero article image

Two cards

Preview

Unlock code

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

export const TwoCards = () => {
  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>Two Cards</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-xl font-semibold text-gray-900">
                  Elevate Outdoor Living
                </Text>
                <Text className="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>
              </Row>
              <Row className="mt-4">
                <Column colSpan={1} className="w-[50%] pr-2">
                  <Img
                    src="https://images.unsplash.com/photo-1511556820780-d912e42b4980?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="w-full rounded-lg object-cover"
                    height="180"
                  />
                  <Text className="text-[16px] font-semibold text-indigo-600">
                    What's new
                  </Text>
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Multifunctional Marvels
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Discover the innovative world of multifunctional furniture,
                    where style meets practicality, offering creative solutions
                    for maximizing space and enhancing functionality in your
                    home
                  </Text>
                </Column>
                <Column colSpan={1} className="w-[50%] pl-2">
                  <Img
                    src="https://images.unsplash.com/photo-1511556820780-d912e42b4980?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="w-full rounded-lg object-cover"
                    height="180"
                  />
                  <Text className="text-[16px] font-semibold text-indigo-600">
                    What's new
                  </Text>
                  <Text className="m-0 text-xl font-semibold text-gray-900">
                    Timeless Classics
                  </Text>
                  <Text className="mb-0 mt-2 text-[16px] text-gray-500">
                    Step into the world of timeless classics as we explore
                    iconic furniture pieces that have stood the test of time,
                    adding enduring elegance and sophistication to any interior
                  </Text>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default TwoCards

Two cards

Hero image with column

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'

export const HeroImageWithColumn = () => {
  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 text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <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-[15px] 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>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default HeroImageWithColumn