resend · bukinoshita · Oct 16, 2025 · Sep 29, 2025 · Sep 30, 2025 · Sep 30, 2025
diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
@@ -9,8 +9,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface AWSVerifyEmailProps {
   verificationCode?: string;
@@ -26,150 +28,80 @@ export default function AWSVerifyEmail({
   return (
     <Html>
       <Head />
-      <Body style={main}>
-        <Preview>AWS Email Verification</Preview>
-        <Container style={container}>
-          <Section style={coverSection}>
-            <Section style={imageSection}>
-              <Img
-                src={`${baseUrl}/static/aws-logo.png`}
-                width="75"
-                height="45"
-                alt="AWS's Logo"
-              />
-            </Section>
-            <Section style={upperSection}>
-              <Heading style={h1}>Verify your email address</Heading>
-              <Text style={mainText}>
-                Thanks for starting the new AWS account creation process. We
-                want to make sure it's really you. Please enter the following
-                verification code when prompted. If you don&apos;t want to
-                create an account, you can ignore this message.
-              </Text>
-              <Section style={verificationSection}>
-                <Text style={verifyText}>Verification code</Text>
-
-                <Text style={codeText}>{verificationCode}</Text>
-                <Text style={validityText}>
-                  (This code is valid for 10 minutes)
+      <Tailwind config={tailwindConfig}>
+        <Body className="bg-white font-aws text-[#212121]">
+          <Preview>AWS Email Verification</Preview>
+          <Container className="p-5 mx-auto bg-[#eee]">
+            <Section className="bg-white">
+              <Section className="bg-[#252f3d] flex py-5 items-center justify-center">
+                <Img
+                  src={`${baseUrl}/static/aws-logo.png`}
+                  width="75"
+                  height="45"
+                  alt="AWS's Logo"
+                />
+              </Section>
+              <Section className="py-[25px] px-[35px]">
+                <Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
+                  Verify your email address
+                </Heading>
+                <Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
+                  Thanks for starting the new AWS account creation process. We
+                  want to make sure it's really you. Please enter the following
+                  verification code when prompted. If you don&apos;t want to
+                  create an account, you can ignore this message.
+                </Text>
+                <Section className="flex items-center justify-center">
+                  <Text className="text-[#333] m-0 font-bold text-center text-[14px]">
+                    Verification code
+                  </Text>
+
+                  <Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
+                    {verificationCode}
+                  </Text>
+                  <Text className="text-[#333] text-[14px] m-0 text-center">
+                    (This code is valid for 10 minutes)
+                  </Text>
+                </Section>
+              </Section>
+              <Hr />
+              <Section className="py-[25px] px-[35px]">
+                <Text className="text-[#333] text-[14px] m-0">
+                  Amazon Web Services will never email you and ask you to
+                  disclose or verify your password, credit card, or banking
+                  account number.
                 </Text>
               </Section>
             </Section>
-            <Hr />
-            <Section style={lowerSection}>
-              <Text style={cautionText}>
-                Amazon Web Services will never email you and ask you to disclose
-                or verify your password, credit card, or banking account number.
-              </Text>
-            </Section>
-          </Section>
-          <Text style={footerText}>
-            This message was produced and distributed by Amazon Web Services,
-            Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
-            Services, Inc.. All rights reserved. AWS is a registered trademark
-            of{' '}
-            <Link href="https://amazon.com" target="_blank" style={link}>
-              Amazon.com
-            </Link>
-            , Inc. View our{' '}
-            <Link href="https://amazon.com" target="_blank" style={link}>
-              privacy policy
-            </Link>
-            .
-          </Text>
-        </Container>
-      </Body>
+            <Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
+              This message was produced and distributed by Amazon Web Services,
+              Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
+              Services, Inc.. All rights reserved. AWS is a registered trademark
+              of{' '}
+              <Link
+                href="https://amazon.com"
+                target="_blank"
+                className="text-[#2754C5] underline text-[14px]"
+              >
+                Amazon.com
+              </Link>
+              , Inc. View our{' '}
+              <Link
+                href="https://amazon.com"
+                target="_blank"
+                className="text-[#2754C5] underline text-[14px]"
+              >
+                privacy policy
+              </Link>
+              .
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
     </Html>
   );
 }
 
 AWSVerifyEmail.PreviewProps = {
   verificationCode: '596853',
 } satisfies AWSVerifyEmailProps;
-
-const main = {
-  backgroundColor: '#fff',
-  color: '#212121',
-};
-
-const container = {
-  padding: '20px',
-  margin: '0 auto',
-  backgroundColor: '#eee',
-};
-
-const h1 = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '20px',
-  fontWeight: 'bold',
-  marginBottom: '15px',
-};
-
-const link = {
-  color: '#2754C5',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  textDecoration: 'underline',
-};
-
-const text = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  margin: '24px 0',
-};
-
-const imageSection = {
-  backgroundColor: '#252f3d',
-  display: 'flex',
-  padding: '20px 0',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const coverSection = { backgroundColor: '#fff' };
-
-const upperSection = { padding: '25px 35px' };
-
-const lowerSection = { padding: '25px 35px' };
-
-const footerText = {
-  ...text,
-  fontSize: '12px',
-  padding: '0 20px',
-};
-
-const verifyText = {
-  ...text,
-  margin: 0,
-  fontWeight: 'bold',
-  textAlign: 'center' as const,
-};
-
-const codeText = {
-  ...text,
-  fontWeight: 'bold',
-  fontSize: '36px',
-  margin: '10px 0',
-  textAlign: 'center' as const,
-};
-
-const validityText = {
-  ...text,
-  margin: '0px',
-  textAlign: 'center' as const,
-};
-
-const verificationSection = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-const mainText = { ...text, marginBottom: '14px' };
-
-const cautionText = { ...text, margin: '0px' };
diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx
@@ -10,8 +10,10 @@ import {
   Link,
   Preview,
   Section,
+  Tailwind,
   Text,
 } from '@react-email/components';
+import tailwindConfig from '../tailwind.config';
 
 interface LinearLoginCodeEmailProps {
   validationCode?: string;
@@ -26,33 +28,46 @@ export const LinearLoginCodeEmail = ({
 }: LinearLoginCodeEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Your login code for Linear</Preview>
-      <Container style={container}>
-        <Img
-          src={`${baseUrl}/static/linear-logo.png`}
-          width="42"
-          height="42"
-          alt="Linear"
-          style={logo}
-        />
-        <Heading style={heading}>Your login code for Linear</Heading>
-        <Section style={buttonContainer}>
-          <Button style={button} href="https://linear.app">
-            Login to Linear
-          </Button>
-        </Section>
-        <Text style={paragraph}>
-          This link and code will only be valid for the next 5 minutes. If the
-          link does not work, you can use the login verification code directly:
-        </Text>
-        <code style={code}>{validationCode}</code>
-        <Hr style={hr} />
-        <Link href="https://linear.app" style={reportLink}>
-          Linear
-        </Link>
-      </Container>
-    </Body>
+    <Tailwind config={tailwindConfig}>
+      <Body className="bg-white font-linear">
+        <Preview>Your login code for Linear</Preview>
+        <Container className="mx-auto my-0 max-w-[560px] px-0 pt-5 pb-12">
+          <Img
+            src={`${baseUrl}/static/linear-logo.png`}
+            width="42"
+            height="42"
+            alt="Linear"
+            className="rounded-3xl w-[42px] h-[42px]"
+          />
+          <Heading className="text-[24px] tracking-[-0.5px] leading-[1.3] font-normal text-[#484848] pt-[17px] px-0 pb-0">
+            Your login code for Linear
+          </Heading>
+          <Section className="py-[27px] px-0">
+            <Button
+              className="bg-[#5e6ad2] rounded font-semibold text-white text-[15px] no-underline text-center block py-[11px] px-[23px]"
+              href="https://linear.app"
+            >
+              Login to Linear
+            </Button>
+          </Section>
+          <Text className="mb-[15px] mx-0 mt-0 leading-[1.4] text-[15px] text-[#3c4149]">
+            This link and code will only be valid for the next 5 minutes. If the
+            link does not work, you can use the login verification code
+            directly:
+          </Text>
+          <code className="font-mono font-bold px-1 py-px bg-[#dfe1e4] text-[#3c4149] text-[21px] tracking-[-0.3px] rounded">
+            {validationCode}
+          </code>
+          <Hr className="border-[#dfe1e4] mt-[42px] mb-[26px]" />
+          <Link
+            href="https://linear.app"
+            className="text-[#b4becc] text-[14px]"
+          >
+            Linear
+          </Link>
+        </Container>
+      </Body>
+    </Tailwind>
   </Html>
 );
 
@@ -61,74 +76,3 @@ LinearLoginCodeEmail.PreviewProps = {
 } as LinearLoginCodeEmailProps;
 
 export default LinearLoginCodeEmail;
-
-const logo = {
-  borderRadius: 21,
-  width: 42,
-  height: 42,
-};
-
-const main = {
-  backgroundColor: '#ffffff',
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  maxWidth: '560px',
-};
-
-const heading = {
-  fontSize: '24px',
-  letterSpacing: '-0.5px',
-  lineHeight: '1.3',
-  fontWeight: '400',
-  color: '#484848',
-  padding: '17px 0 0',
-};
-
-const paragraph = {
-  margin: '0 0 15px',
-  fontSize: '15px',
-  lineHeight: '1.4',
-  color: '#3c4149',
-};
-
-const buttonContainer = {
-  padding: '27px 0 27px',
-};
-
-const button = {
-  backgroundColor: '#5e6ad2',
-  borderRadius: '3px',
-  fontWeight: '600',
-  color: '#fff',
-  fontSize: '15px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  padding: '11px 23px',
-};
-
-const reportLink = {
-  fontSize: '14px',
-  color: '#b4becc',
-};
-
-const hr = {
-  borderColor: '#dfe1e4',
-  margin: '42px 0 26px',
-};
-
-const code = {
-  fontFamily: 'monospace',
-  fontWeight: '700',
-  padding: '1px 4px',
-  backgroundColor: '#dfe1e4',
-  letterSpacing: '-0.3px',
-  fontSize: '21px',
-  borderRadius: '4px',
-  color: '#3c4149',
-};