Skip to content

feat(demo): use Tailwind v4 in amazon-review.tsx #2502

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 3 commits into
base: chore/basic-setup
Choose a base branch
from
Open

feat(demo): use Tailwind v4 in amazon-review.tsx #2502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2924551
refactor(demo): amazon with tailwind
bukinoshita Sep 29, 2025
660e207
use tailwind
gabrielmfern Oct 3, 2025
1c0ca7d
fix minor differences
gabrielmfern Oct 7, 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
336 changes: 146 additions & 190 deletions apps/demo/emails/reviews/amazon-review.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import {
Preview,
Row,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface AmazonReviewEmailProps {
titleText?: string;
Expand All @@ -38,204 +40,158 @@ export const AmazonReviewEmail = ({
<Html>
<Head />

<Body style={main}>
<Preview>Amazon Review</Preview>
<Container style={container}>
<Section>
<Row>
<Column align="center">
<Link href="https://www.amazon.com">
<Tailwind config={tailwindConfig}>
<Body className="font-amazon bg-white">
<Preview>Amazon Review</Preview>
<Container className="border-t-4 border-solid border-[#FF9900] mx-auto p-5 w-[640px]">
<Section>
<Row>
<Column align="center">
<Link href="https://www.amazon.com">
<Img
src={`${baseUrl}/static/amazon-prime-logo.png`}
width="109"
height="48"
alt="Amazon Prime Logo"
/>
</Link>
</Column>
</Row>
</Section>

<Section>
<Row>
<Column align="center">
<Text className="text-[#232f3e] text-4xl leading-[38px] font-normal my-5">
{titleText}
</Text>
<Text>{reviewText}</Text>
</Column>
</Row>
</Section>

<Section>
<Row>
<Column>
<Img
src={`${baseUrl}/static/amazon-prime-logo.png`}
width="109"
height="48"
alt="Amazon Prime Logo"
src={`${baseUrl}/static/amazon-book.jpg`}
alt="Amazon Book"
width="274"
height="350"
/>
</Link>
</Column>
</Row>
</Section>

<Section>
<Row>
<Column align="center">
<Text style={title}>{titleText}</Text>
<Text>{reviewText}</Text>
</Column>
</Row>
</Section>

<Section>
<Row>
<Column>
<Img
src={`${baseUrl}/static/amazon-book.jpg`}
alt="Amazon Book"
width="274"
height="350"
/>
</Column>

<Column style={ratingContent}>
<Text>
14 Habits of Highly Productive Developers (English Edition)
</Text>
<Text>Start with rating this product</Text>

{reviwStars.map((star, index) => (
</Column>

<Column className="pl-[30px]">
<Text>
14 Habits of Highly Productive Developers (English Edition)
</Text>
<Text>Start with rating this product</Text>

{reviwStars.map((star, index) => (
<Img
key={index}
src={star}
alt="Amazon Rating"
className="inline-block"
/>
))}

<Text>
Your reviews will be posted on Amazon using your public
name.
<Link>Check your public name.</Link>
</Text>
</Column>
</Row>
</Section>

<Section>
<Row>
<Column align="center">
<Text className="bg-[#008296] text-white py-2 px-0">
How about evaluating a previous purchase?{' '}
<Link className="text-white underline cursor-pointer">
View more
</Link>
</Text>
</Column>
</Row>
</Section>

<Hr className="border-[#cccccc]" />

<Section>
<Row>
<Column>
<Img
key={index}
src={star}
alt="Amazon Rating"
style={rating}
src={`${baseUrl}/static/amazon-logo.png`}
alt="Amazon Logo"
width="93"
height="23"
/>
))}

<Text>
Your reviews will be posted on Amazon using your public name.
<Link>Check your public name.</Link>
</Column>

<Column align="right">
{socialMediaIcons.map((src, index) => (
<Img
key={index}
src={src}
alt="Amazon Social Midia"
width="30"
height="30"
className="inline-block ml-2.5"
/>
))}
</Column>
</Row>
</Section>

<Section>
<Row>
<Text className="text-[10px] text-[#666666] my-2">
Customer reviews must adhere to the{' '}
<Link className="text-[#666666] underline cursor-pointer">
Community Guidelines
</Link>{' '}
.
</Text>
</Column>
</Row>
</Section>

<Section>
<Row>
<Column align="center">
<Text style={previewPurchase}>
How about evaluating a previous purchase?{' '}
<Link style={previewPurchaseLink}>View more</Link>
<Text className="text-[10px] text-[#666666] my-2">
We hope this message was helpful to you. However, if you
prefer not to receive this type of communication from{' '}
<Link className="text-[#1155cc] underline cursor-pointer">
Amazon.com
</Link>{' '}
at{' '}
<Link className="text-[#1155cc] underline cursor-pointer">
[email protected]{' '}
</Link>
,{' '}
<Link className="text-[#999999] underline cursor-pointer">
click here
</Link>{' '}
.
</Text>
</Column>
</Row>
</Section>

<Hr style={{ borderColor: '#cccccc' }} />

<Section>
<Row>
<Column>
<Img
src={`${baseUrl}/static/amazon-logo.png`}
alt="Amazon Logo"
width="93"
height="23"
/>
</Column>

<Column align="right">
{socialMediaIcons.map((src, index) => (
<Img
key={index}
src={src}
alt="Amazon Social Midia"
width="30"
height="30"
style={socialMedia}
/>
))}
</Column>
</Row>
</Section>

<Section>
<Row>
<Text style={footerText}>
Customer reviews must adhere to the{' '}
<Link style={communityLink}>Community Guidelines</Link> .
</Text>
<Text style={footerText}>
We hope this message was helpful to you. However, if you prefer
not to receive this type of communication from{' '}
<Link style={urlLink}>Amazon.com</Link> at{' '}
<Link style={urlLink}>[email protected] </Link>,{' '}
<Link style={clickHereLink}>click here</Link> .
</Text>
<Text style={footerText}>
Please note that product prices and availability are subject to
change.
</Text>
<Text style={footerText}>
© 2023 Amazon.com, Inc. or its affiliates. Amazon and all
associated marks are trademarks of Amazon.com, Inc. or its
affiliates.
</Text>
<Text style={footerText}>Reference: 706784740</Text>
</Row>
</Section>
</Container>
</Body>
<Text className="text-[10px] text-[#666666] my-2">
Please note that product prices and availability are subject
to change.
</Text>
<Text className="text-[10px] text-[#666666] my-2">
© 2023 Amazon.com, Inc. or its affiliates. Amazon and all
associated marks are trademarks of Amazon.com, Inc. or its
affiliates.
</Text>
<Text className="text-[10px] text-[#666666] my-2">
Reference: 706784740
</Text>
</Row>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};

export default AmazonReviewEmail;

const main = {
fontFamily: 'Ember,Helvetica,Arial,sans-seri',
backgroundColor: '#ffffff',
};

const container = {
borderTop: '4px solid #FF9900',
margin: '0 auto',
padding: '20px',
width: '640px',
};

const title = {
color: '#232f3e',
fontSize: '36px',
lineHeight: '38px',
fontWeight: '400',
margin: '20px 0',
};

const ratingContent = {
paddingLeft: '30px',
};
AmazonReviewEmail.tailwindConfig = tailwindConfig;

const rating = {
display: 'inline-block',
};

const previewPurchase = {
background: '#008296',
color: '#ffffff',
padding: '8px 0',
};

const previewPurchaseLink = {
color: '#ffffff',
textDecoration: 'underline',
cursor: 'pointer',
};

const socialMedia = {
display: 'inline-block',
marginLeft: '10px',
};

const communityLink = {
color: '#666666',
textDecoration: 'underline',
cursor: 'pointer',
};

const clickHereLink = {
color: '#999999',
textDecoration: 'underline',
cursor: 'pointer',
};

const urlLink = {
color: '#1155cc',
textDecoration: 'underline',
cursor: 'pointer',
};

const footerText = {
fontSize: '10px',
color: '#666666',
margin: '8px 0',
};
export default AmazonReviewEmail;
5 changes: 5 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 @@ -2,4 +2,9 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';

export default {
presets: [pixelBasedPreset],
theme: {
fontFamily: {
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
},
},
} satisfies TailwindConfig;
Loading