Gallery email templates

Images grid vertically

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 ImagesGridVertically = () => {
  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>ImagesGridVertically</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[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">
              <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-[288px] w-full rounded-xl object-cover"
                />
              </Link>
              <Row className="mt-4">
                <Column className="w-[50%] pr-2">
                  <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-[288px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
                <Column className="w-[50%] pl-2">
                  <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-[288px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ImagesGridVertically

4 images grid

Preview

Unlock code

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 ImagesGrid = () => {
  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>ImagesGrid</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-12">
              <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 className="mt-4">
                <Column className="w-[50%] pr-2">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1617005082133-548c4dd27f35?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                      className="h-[288px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
                <Column className="w-[50%] pl-2">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1570569962804-5377da5be035?q=80&w=2995&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                      className="h-[288px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
              </Row>
              <Row className="mt-4">
                <Column className="w-[50%] pr-2">
                  <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-[288px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
                <Column className="w-[50%] pl-2">
                  <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-[288px] w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ImagesGrid

3 images column

Preview

Unlock code

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 Images3Column = () => {
  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>Images 3 Column</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[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 className="mt-4">
                <Column className="w-[33%] pr-2">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1617005082133-548c4dd27f35?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%] px-2">
                  <Link href="#">
                    <Img
                      src="https://images.unsplash.com/photo-1570569962804-5377da5be035?q=80&w=2995&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-2">
                  <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>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Images3Column

Images grid horizontally

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 ImagesGridHorizontally = () => {
  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>ImagesGridHorizontally</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section>
              <Row>
                <Text className="m-0 text-[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 className="mt-4">
                <Column className="w-[50%] pr-2">
                  <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-[152px] w-full rounded-xl object-cover pb-2"
                    />
                  </Link>
                  <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-[152px] w-full rounded-xl object-cover pt-2"
                    />
                  </Link>
                </Column>
                <Column className="w-[50%] pl-2">
                  <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-full w-full rounded-xl object-cover"
                    />
                  </Link>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ImagesGridHorizontally