Skip to content

feat(demo): use Tailwind v4 in linear-login-code.tsx #2490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 10, 2025
+232 −98
Merged

feat(demo): use Tailwind v4 in linear-login-code.tsx #2490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
61484e6
refactor(demo): linear login code with tailwind
bukinoshita Sep 29, 2025
12db6cf
use tailwind v4
gabrielmfern Oct 1, 2025
3c2b54c
Update apps/demo/emails/magic-links/linear-login-code.tsx
bukinoshita Oct 2, 2025
15bbffb
fix small differences
gabrielmfern Oct 7, 2025
67ec923
lint
gabrielmfern Oct 7, 2025
d8c9613
Merge branch 'chore/basic-setup' into refactor/linear-login-code-with…
gabrielmfern Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 42 additions & 98 deletions apps/demo/emails/magic-links/linear-login-code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import {
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface LinearLoginCodeEmailProps {
validationCode?: string;
Expand All @@ -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>
);

Expand All @@ -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',
};
2 changes: 2 additions & 0 deletions apps/demo/emails/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ export default {
theme: {
fontFamily: {
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
linear:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
stripe: [
'-apple-system',
'BlinkMacSystemFont',
Expand Down
188 changes: 188 additions & 0 deletions demo
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<link
rel="preload"
as="image"
href="https://react-email-demo-r83t4405a-resend.vercel.app/static/aws-logo.png" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<!--$-->
</head>
<body style="background-color:#fff">
<table
border="0"
width="100%"
cellpadding="0"
cellspacing="0"
role="presentation"
align="center">
<tbody>
<tr>
<td style="background-color:#fff;color:#212121">
<div
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
data-skip-in-text="true">
AWS Email Verification
<div>
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
</div>
</div>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="max-width:37.5em;padding:20px;margin:0 auto;background-color:#eee">
<tbody>
<tr style="width:100%">
<td>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background-color:#fff">
<tbody>
<tr>
<td>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background-color:#252f3d;display:flex;padding:20px 0;align-items:center;justify-content:center">
<tbody>
<tr>
<td>
<img
alt="AWS&#x27;s Logo"
height="45"
src="https://react-email-demo-r83t4405a-resend.vercel.app/static/aws-logo.png"
style="display:block;outline:none;border:none;text-decoration:none"
width="75" />
</td>
</tr>
</tbody>
</table>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="padding:25px 35px">
<tbody>
<tr>
<td>
<h1
style="color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:20px;font-weight:bold;margin-bottom:15px">
Verify your email address
</h1>
<p
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;margin-bottom:14px;margin-top:24px;margin-right:0;margin-left:0">
Thanks for starting the new AWS account
creation process. We want to make sure
it&#x27;s really you. Please enter the
following verification code when prompted.
If you don&#x27;t want to create an
account, you can ignore this message.
</p>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="display:flex;align-items:center;justify-content:center">
<tbody>
<tr>
<td>
<p
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0;font-weight:bold;text-align:center;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">
Verification code
</p>
<p
style="font-size:36px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:10px 0;font-weight:bold;text-align:center;margin-top:10px;margin-right:0;margin-bottom:10px;margin-left:0">
596853
</p>
<p
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0px;text-align:center;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px">
(This code is valid for 10
minutes)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<hr
style="width:100%;border:none;border-top:1px solid #eaeaea" />
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="padding:25px 35px">
<tbody>
<tr>
<td>
<p
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px">
Amazon Web Services will never email you
and ask you to disclose or verify your
password, credit card, or banking account
number.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p
style="font-size:12px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;padding:0 20px;margin-top:24px;margin-right:0;margin-bottom:24px;margin-left: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<!-- -->
<a
href="https://amazon.com"
style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
target="_blank"
>Amazon.com</a
>, Inc. View our<!-- -->
<a
href="https://amazon.com"
style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
target="_blank"
>privacy policy</a
>.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/$-->
</body>
</html>

Loading