Gallery

import { Container, Img, Section, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Section className="px-4 py-4">
      <Img
        src="https://example.com/image.jpg"
        alt="Description"
        width={600}
        height={400}
        className="w-full rounded-lg"
      />
    </Section>
  </Container>
</Tailwind>

import { Column, Container, Img, Row, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Row className="w-full">
      <Column className="w-1/2 pr-2">
        <Img
          src="https://example.com/image1.jpg"
          alt="Image 1"
          width={300}
          height={200}
          className="w-full rounded-lg"
        />
      </Column>
      <Column className="w-1/2 pl-2">
        <Img
          src="https://example.com/image2.jpg"
          alt="Image 2"
          width={300}
          height={200}
          className="w-full rounded-lg"
        />
      </Column>
    </Row>
  </Container>
</Tailwind>

import { Column, Container, Img, Row, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Row className="w-full">
      <Column className="w-1/3 px-1">
        <Img
          src="https://example.com/image1.jpg"
          alt="Image 1"
          width={200}
          height={200}
          className="w-full rounded-lg"
        />
      </Column>
      <Column className="w-1/3 px-1">
        <Img
          src="https://example.com/image2.jpg"
          alt="Image 2"
          width={200}
          height={200}
          className="w-full rounded-lg"
        />
      </Column>
      <Column className="w-1/3 px-1">
        <Img
          src="https://example.com/image3.jpg"
          alt="Image 3"
          width={200}
          height={200}
          className="w-full rounded-lg"
        />
      </Column>
    </Row>
  </Container>
</Tailwind>

import { Column, Container, Img, Row, Section, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Section>
      <Row className="mb-2 w-full">
        <Column className="w-1/2 pr-1">
          <Img
            src="https://example.com/image1.jpg"
            alt="Image 1"
            width={300}
            height={200}
            className="w-full rounded-lg"
          />
        </Column>
        <Column className="w-1/2 pl-1">
          <Img
            src="https://example.com/image2.jpg"
            alt="Image 2"
            width={300}
            height={200}
            className="w-full rounded-lg"
          />
        </Column>
      </Row>
      <Row className="w-full">
        <Column className="w-1/2 pr-1">
          <Img
            src="https://example.com/image3.jpg"
            alt="Image 3"
            width={300}
            height={200}
            className="w-full rounded-lg"
          />
        </Column>
        <Column className="w-1/2 pl-1">
          <Img
            src="https://example.com/image4.jpg"
            alt="Image 4"
            width={300}
            height={200}
            className="w-full rounded-lg"
          />
        </Column>
      </Row>
    </Section>
  </Container>
</Tailwind>