Why traditional email HTML is notoriously broken
Email rendering engines (especially Microsoft Outlook on Windows with Microsoft Word rendering) do not support modern CSS Flexbox, Grid, or custom web fonts.
React Email provides modern React abstractions (Container, Section, Row, Column, Button) that automatically compile into bulletproof HTML tables compatible with 80+ email clients.
Building a Bulletproof Invoice Template (InvoiceEmail.tsx)
Using Tailwind CSS classes with the Tailwind component from @react-email/components.
TYPESCRIPT
import { Html, Head, Body, Container, Section, Text, Button, Tailwind } from '@react-email/components';
import * as React from 'react';
export function InvoiceEmail({ invoiceId, amount, date }: { invoiceId: string; amount: string; date: string }) {
return (
<Html>
<Head />
<Tailwind>
<Body className="bg-zinc-950 font-sans text-zinc-100 p-8">
<Container className="max-w-[560px] mx-auto border border-zinc-800 p-6 rounded bg-zinc-900">
<Section className="border-b border-zinc-800 pb-4 mb-4">
<Text className="text-emerald-400 font-mono text-xs uppercase font-bold tracking-wider">SadaSend Receipt</Text>
<Text className="text-2xl font-bold mt-1">Invoice #{invoiceId}</Text>
</Section>
<Section className="py-2">
<Text className="text-zinc-400 text-sm">Amount Paid: <strong className="text-white">{amount}</strong></Text>
<Text className="text-zinc-400 text-sm">Date: <strong className="text-white">{date}</strong></Text>
</Section>
<Section className="pt-4">
<Button href="https://sadasend.com/app/billing" className="bg-emerald-500 text-black px-5 py-2.5 rounded text-sm font-semibold">
Download PDF Invoice
</Button>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}Core Rules for Bulletproof Email Design
- Always set inline fallbacks for custom fonts (system-ui, sans-serif).
- Use max-width: 600px containers for optimal readability on mobile screens.
- Always supply alt attributes on images and declare explicit width and height.
Early Access
Building AI agents that send email?
Join the SadaSend early access waitlist to get scoped API keys, recipient allowlists, and Model Context Protocol (MCP) servers upon launch.