Articles

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

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
  <Section className="rounded-lg border border-gray-200 overflow-hidden">
    <Img
      src="https://example.com/thumbnail.jpg"
      alt="Article thumbnail"
      width={600}
      height={300}
      className="w-full"
    />
    <Section className="p-4">
      <Text className="m-0 text-xs text-gray-500">TECHNOLOGY • 5 MIN READ</Text>
      <Link href="https://example.com/article" className="no-underline">
        <Text className="m-0 mt-2 text-lg font-semibold text-gray-900">
          10 Tips for Building Better Email Templates
        </Text>
      </Link>
      <Text className="m-0 mt-2 text-sm text-gray-600">
        Learn the best practices for creating responsive, accessible email templates.
      </Text>
      <Link
        href="https://example.com/article"
        className="mt-3 inline-block text-sm font-medium text-blue-600 no-underline"
      >
        Read more →
      </Link>
    </Section>
  </Section>
  </Container>
</Tailwind>

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

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
  <Section>
    <Row className="border-b border-gray-200 py-4">
      <Column className="w-24 align-middle">
        <Img
          src="https://example.com/thumb.jpg"
          alt="Article"
          width={80}
          height={80}
          className="rounded-lg"
        />
      </Column>
      <Column className="pl-4 align-middle">
        <Text className="m-0 text-xs text-gray-500">Mar 15, 2024</Text>
        <Link href="https://example.com/article" className="no-underline">
          <Text className="m-0 text-sm font-semibold text-gray-900">
            Getting Started with Email Design
          </Text>
        </Link>
        <Text className="m-0 mt-1 text-xs text-gray-600">
          A beginner's guide to creating beautiful email templates.
        </Text>
      </Column>
    </Row>
    {/* Repeat for more articles */}
  </Section>
  </Container>
</Tailwind>