Skip to content

feat(demo): use Tailwind v4 in dropbox-reset-password.tsx #2505

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

Open
wants to merge 22 commits into
base: chore/basic-setup
Choose a base branch
from
Open

feat(demo): use Tailwind v4 in dropbox-reset-password.tsx #2505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
0604b50
chore(demo): tailwind basic setup
bukinoshita Sep 29, 2025
1a7f9df
fix: minor tweak
bukinoshita Sep 30, 2025
f90893b
fix: minor tweak
bukinoshita Sep 30, 2025
3fa21e5
fix errors
gabrielmfern Oct 1, 2025
5f653b4
add tailwind config
gabrielmfern Oct 1, 2025
bd30439
use the new testing version
gabrielmfern Oct 1, 2025
22ea3f7
update lock
gabrielmfern Oct 1, 2025
9bafcd9
use pixelBasedPreset on tailwind config
gabrielmfern Oct 1, 2025
0ce7170
update components
gabrielmfern Oct 1, 2025
4060a59
sort
gabrielmfern Oct 1, 2025
e0847b7
sort
gabrielmfern Oct 1, 2025
044e56a
update to next preview
gabrielmfern Oct 3, 2025
a8ebdfd
update components
gabrielmfern Oct 7, 2025
4aa08f5
update lock
gabrielmfern Oct 7, 2025
6c63cce
feat(demo): use Tailwind v4 in amazon-review.tsx (#2502)
bukinoshita Oct 10, 2025
9376059
feat(demo): use Tailwind v4 in stripe-welcome.tsx (#2531)
gabrielmfern Oct 10, 2025
1753f56
refactor(demo): dropbox with tailwind
bukinoshita Sep 29, 2025
b4c3f00
use tailwind
gabrielmfern Oct 3, 2025
fc27a11
fix pixel differences
gabrielmfern Oct 7, 2025
e84daa1
few touches
gabrielmfern Oct 10, 2025
56cb747
fix refix padding
gabrielmfern Oct 10, 2025
8ccaa79
fix font in button
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
1 change: 1 addition & 0 deletions apps/demo/emails/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "tailwindcss";
116 changes: 46 additions & 70 deletions apps/demo/emails/reset-password/dropbox-reset-password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface DropboxResetPasswordEmailProps {
userFirstname?: string;
Expand All @@ -27,39 +29,48 @@ export const DropboxResetPasswordEmail = ({
return (
<Html>
<Head />
<Body style={main}>
<Preview>Dropbox reset your password</Preview>
<Container style={container}>
<Img
src={`${baseUrl}/static/dropbox-logo.png`}
width="40"
height="33"
alt="Dropbox"
/>
<Section>
<Text style={text}>Hi {userFirstname},</Text>
<Text style={text}>
Someone recently requested a password change for your Dropbox
account. If this was you, you can set a new password here:
</Text>
<Button style={button} href={resetPasswordLink}>
Reset password
</Button>
<Text style={text}>
If you don&apos;t want to change your password or didn&apos;t
request this, just ignore and delete this message.
</Text>
<Text style={text}>
To keep your account secure, please don&apos;t forward this email
to anyone. See our Help Center for{' '}
<Link style={anchor} href={resetPasswordLink}>
more security tips.
</Link>
</Text>
<Text style={text}>Happy Dropboxing!</Text>
</Section>
</Container>
</Body>
<Tailwind config={tailwindConfig}>
<Body className="bg-[#f6f9fc] py-2.5">
<Preview>Dropbox reset your password</Preview>
<Container className="bg-white border border-solid border-[#f0f0f0] p-[45px]">
<Img
src={`${baseUrl}/static/dropbox-logo.png`}
width="40"
height="33"
alt="Dropbox"
/>
<Section>
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
Hi {userFirstname},
</Text>
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
Someone recently requested a password change for your Dropbox
account. If this was you, you can set a new password here:
</Text>
<Button
className="bg-[#007ee6] rounded text-white text-[15px] no-underline text-center font-dropbox-sans block w-[210px] py-[14px] px-[7px]"
href={resetPasswordLink}
>
Reset password
</Button>
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
If you don&apos;t want to change your password or didn&apos;t
request this, just ignore and delete this message.
</Text>
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
To keep your account secure, please don&apos;t forward this
email to anyone. See our Help Center for{' '}
<Link className="underline" href={resetPasswordLink}>
more security tips.
</Link>
</Text>
<Text className="text-base font-dropbox font-light text-[#404040] leading-[26px]">
Happy Dropboxing!
</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};
Expand All @@ -69,41 +80,6 @@ DropboxResetPasswordEmail.PreviewProps = {
resetPasswordLink: 'https://www.dropbox.com',
} as DropboxResetPasswordEmailProps;

export default DropboxResetPasswordEmail;

const main = {
backgroundColor: '#f6f9fc',
padding: '10px 0',
};
DropboxResetPasswordEmail.tailwindConfig = tailwindConfig;

const container = {
backgroundColor: '#ffffff',
border: '1px solid #f0f0f0',
padding: '45px',
};

const text = {
fontSize: '16px',
fontFamily:
"'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
fontWeight: '300',
color: '#404040',
lineHeight: '26px',
};

const button = {
backgroundColor: '#007ee6',
borderRadius: '4px',
color: '#fff',
fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
fontSize: '15px',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'block',
width: '210px',
padding: '14px 7px',
};

const anchor = {
textDecoration: 'underline',
};
export default DropboxResetPasswordEmail;
Loading
Loading