Marketing

import { Button, Container, Heading, Section, Text, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Section className="bg-gray-900 px-6 py-12 text-center">
      <Heading as="h1" className="m-0 text-3xl font-bold text-white text-center">
        Welcome to Our Platform
      </Heading>
      <Text className="mx-auto mt-4 max-w-md text-base text-gray-300 text-center">
        Build beautiful emails with ease. Our platform helps you create stunning email templates in minutes.
      </Text>
      <Button
        href="https://example.com/get-started"
        width={160}
        height={44}
        align="center"
        backgroundColor="#2563eb"
        borderRadius={8}
        textColor="#ffffff"
        fontSize={14}
      >
        Get Started
      </Button>
    </Section>
  </Container>
</Tailwind>

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

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Section className="bg-blue-600 px-4 py-3 text-center">
      <Text className="m-0 text-sm font-medium text-white">
        New feature available! Check out our latest update.{' '}
        <a href="https://example.com/learn-more" className="text-white underline">
          Learn more &rarr;
        </a>
      </Text>
    </Section>
  </Container>
</Tailwind>

import { Button, Container, Heading, Section, Text, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Section className="bg-gray-100 px-6 py-8 text-center">
      <Heading as="h2" className="m-0 text-xl font-bold text-gray-900">
        Stay in the loop
      </Heading>
      <Text className="mt-2 text-sm text-gray-600">
        Subscribe to our newsletter for the latest updates and tips.
      </Text>
      <Button
        href="https://example.com/subscribe"
        width={150}
        height={40}
        align="center"
        backgroundColor="#111827"
        borderRadius={6}
        textColor="#ffffff"
        fontSize={14}
      >
        Subscribe Now
      </Button>
    </Section>
  </Container>
</Tailwind>