Ecommerce email templates

Title + 4 cards

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

export const Title4Cards = () => {
  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>Title 4 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">
                  Unleash Creativity
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Unleash your inner designer with our customizable furniture
                  options, allowing you to create a space that reflects your
                  unique vision
                </Text>
              </Row>
              <Row className="mt-4">
                <Column align="center" 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="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
                <Column align="center" colSpan={1} className="w-[50%] pl-2">
                  <Img
                    src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?q=80&w=2789&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="w-full rounded-lg object-cover"
                    height="180"
                  />
                  <Text className="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
              </Row>
            </Section>
            <Hr className="mx-0 my-8 w-full border border-solid border-gray-200" />
            <Section>
              <Row>
                <Column align="center" colSpan={1} className="w-[50%] pr-2">
                  <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="w-full rounded-lg object-cover"
                    height="180"
                  />
                  <Text className="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
                <Column align="center" colSpan={1} className="w-[50%] pl-2">
                  <Img
                    src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?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="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Title4Cards

Title + 4 cards

Title + 3 cards in a row

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

export const Title3Cards = () => {
  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>Title 3 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">
                  Unleash Creativity
                </Text>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Unleash your inner designer with our customizable furniture
                  options, allowing you to create a space that reflects your
                  unique vision
                </Text>
              </Row>
              <Row className="mt-4">
                <Column align="center" colSpan={1} className="w-[33%] pr-1">
                  <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="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
                <Column align="center" colSpan={1} className="w-[33%] px-1">
                  <Img
                    src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?q=80&w=2789&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    className="w-full rounded-lg object-cover"
                    height="180"
                  />
                  <Text className="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
                <Column align="center" colSpan={1} className="w-[33%] pl-1">
                  <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="w-full rounded-lg object-cover"
                    height="180"
                  />
                  <Text className="m-0 mt-6 text-xl font-semibold text-gray-900">
                    Sleek study
                  </Text>
                  <Text className="m-0 mt-4 text-[16px] text-gray-500">
                    Minimalist design with ample workspace
                  </Text>
                  <Text className="m-0 mt-2 text-[16px] font-semibold text-gray-900">
                    $999.99
                  </Text>
                  <Button
                    className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Title3Cards

Title + 3 cards in a row

One product

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'

export const OneProduct = () => {
  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>Products</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-1612188842101-f976582906fc?q=80&w=2864&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 product
                </Text>
                <Heading
                  as="h1"
                  className="text-4xl font-semibold tracking-tight text-gray-900"
                >
                  Elegant Comfort
                </Heading>
                <Text className="mt-2 text-[16px] text-gray-500">
                  Luxurious, plush seating for a sophisticated and cozy living
                  room ambiance
                </Text>
                <Text className="text-[16px] font-semibold text-gray-900">
                  $999.99
                </Text>
                <Button
                  className="mt-4 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"
                  href="#"
                >
                  Buy
                </Button>
              </Section>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default OneProduct

One product

One product image right

Preview

Unlock code

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

export const OneItemImageRight = () => {
  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>One item image right</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 mt-2 text-xl font-semibold text-gray-900">
                    Sleek Storage
                  </Text>
                  <Text className="mt-2 text-[16px] text-gray-500">
                    Contemporary design with ample storage space, perfect for
                    organizing your essentials.
                  </Text>
                  <Text className="mt-2 text-[16px] text-lg font-semibold text-gray-900">
                    $599.99
                  </Text>
                  <Button
                    className="w-[75%] rounded-lg bg-indigo-600 py-3 text-center font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </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 OneItemImageRight

One product image right

One product image left

Preview

Unlock code

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

export const OneItemImageLeft = () => {
  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>One item image left</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%] pr-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>
                <Column className="w-[50%] align-baseline">
                  <Text className="m-0 mt-2 text-xl font-semibold text-gray-900">
                    Sleek Storage
                  </Text>
                  <Text className="mt-2 text-[16px] text-gray-500">
                    Contemporary design with ample storage space, perfect for
                    organizing your essentials.
                  </Text>
                  <Text className="mt-2 text-[16px] text-lg font-semibold text-gray-900">
                    $599.99
                  </Text>
                  <Button
                    className="w-[75%] rounded-lg bg-indigo-600 py-3 text-center font-semibold text-white"
                    href="#"
                  >
                    Buy
                  </Button>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default OneItemImageLeft