Skip to content

feat(demo): use Tailwind v4 in airbnb-review.tsx #2503

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 4 commits into from
Oct 10, 2025
+108 −144
Merged

feat(demo): use Tailwind v4 in airbnb-review.tsx #2503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9b4f409
refactor(demo): airbnb with tailwind
bukinoshita Sep 29, 2025
3ac4e17
use tailwind
gabrielmfern Oct 3, 2025
a97d106
fix minor differences
gabrielmfern Oct 7, 2025
5d65c2c
fix review text
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
241 changes: 97 additions & 144 deletions apps/demo/emails/reviews/airbnb-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 AirbnbReviewEmailProps {
authorName?: string;
Expand All @@ -34,78 +36,100 @@ export const AirbnbReviewEmail = ({
<Html>
<Head />

<Body style={main}>
<Preview>{previewText}</Preview>
<Container style={container}>
<Section>
<Img
src={`${baseUrl}/static/airbnb-logo.png`}
width="96"
height="30"
alt="Airbnb"
/>
</Section>
<Section>
<Img
src={authorImage}
width="96"
height="96"
alt={authorName}
style={userImage}
/>
</Section>
<Section style={{ paddingBottom: '20px' }}>
<Row>
<Text style={heading}>Here's what {authorName} wrote</Text>
<Text style={review}>{reviewText}</Text>
<Text style={paragraph}>
Now that the review period is over, we’ve posted {authorName}
’s review to your Airbnb profile.
</Text>
<Text style={{ ...paragraph, paddingBottom: '16px' }}>
While it’s too late to write a review of your own, you can send
your feedback to {authorName} using your Airbnb message thread.
</Text>

<Button style={button} href="https://www.airbnb.com">
Send My Feedback
</Button>
</Row>
</Section>

<Hr style={hr} />

<Section>
<Row>
<Text style={{ ...paragraph, fontWeight: '700' }}>
Common questions
</Text>
<Text>
<Link href="https://www.airbnb.com" style={link}>
How do reviews work?
</Link>
</Text>
<Text>
<Link href="https://www.airbnb.com" style={link}>
How do star ratings work?
<Tailwind config={tailwindConfig}>
<Body className="bg-white font-airbnb">
<Preview>{previewText}</Preview>
<Container className="mx-auto py-5 pb-12 w-[580px] max-w-full">
<Section>
<Img
src={`${baseUrl}/static/airbnb-logo.png`}
width="96"
height="30"
alt="Airbnb"
/>
</Section>
<Section>
<Img
src={authorImage}
width="96"
height="96"
alt={authorName}
className="mx-auto mb-4 rounded-full"
/>
</Section>
<Section className="pb-5">
<Row>
<Text className="text-[32px] leading-[1.3] font-bold text-[#484848]">
Here's what {authorName} wrote
</Text>
<Text className="text-lg leading-[1.4] text-[#484848] p-6 bg-[#f2f3f3] rounded">
{reviewText}
</Text>
<Text className="text-lg leading-[1.4] text-[#484848]">
Now that the review period is over, we've posted {authorName}
's review to your Airbnb profile.
</Text>
<Text className="text-lg leading-[1.4] text-[#484848] pb-4">
While it's too late to write a review of your own, you can
send your feedback to {authorName} using your Airbnb message
thread.
</Text>

<Button
className="bg-[#ff5a5f] rounded-sm text-white text-[18px] py-[19px] px-[30px] no-underline text-center block"
href="https://www.airbnb.com"
>
Send My Feedback
</Button>
</Row>
</Section>

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

<Section>
<Row>
<Text className="text-lg leading-[1.4] text-[#484848] font-bold">
Common questions
</Text>
<Text>
<Link
href="https://www.airbnb.com"
className="text-lg leading-[1.4] text-[#ff5a5f] block"
>
How do reviews work?
</Link>
</Text>
<Text>
<Link
href="https://www.airbnb.com"
className="text-lg leading-[1.4] text-[#ff5a5f] block"
>
How do star ratings work?
</Link>
</Text>
<Text>
<Link
href="https://www.airbnb.com"
className="text-lg leading-[1.4] text-[#ff5a5f] block"
>
Can I leave a review after 14 days?
</Link>
</Text>
<Hr className="border-[#cccccc] my-5" />
<Text className="text-[#9ca299] text-[14px] leading-[24px] mb-2.5">
Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
</Text>
<Link
href="https://www.airbnb.com"
className="text-[14px] text-[#9ca299] underline"
>
Report unsafe behavior
</Link>
</Text>
<Text>
<Link href="https://www.airbnb.com" style={link}>
Can I leave a review after 14 days?
</Link>
</Text>
<Hr style={hr} />
<Text style={footer}>
Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
</Text>
<Link href="https://www.airbnb.com" style={reportLink}>
Report unsafe behavior
</Link>
</Row>
</Section>
</Container>
</Body>
</Row>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};
Expand All @@ -119,77 +143,6 @@ AirbnbReviewEmail.PreviewProps = {
host!”`,
} as AirbnbReviewEmailProps;

export default AirbnbReviewEmail;

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',
width: '580px',
maxWidth: '100%',
};

const userImage = {
margin: '0 auto',
marginBottom: '16px',
borderRadius: '50%',
};

const heading = {
fontSize: '32px',
lineHeight: '1.3',
fontWeight: '700',
color: '#484848',
};

const paragraph = {
fontSize: '18px',
lineHeight: '1.4',
color: '#484848',
};

const review = {
...paragraph,
padding: '24px',
backgroundColor: '#f2f3f3',
borderRadius: '4px',
};

const button = {
backgroundColor: '#ff5a5f',
borderRadius: '3px',
color: '#fff',
fontSize: '18px',
padding: '19px 30px',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'block',
};

const link = {
...paragraph,
color: '#ff5a5f',
display: 'block',
};

const reportLink = {
fontSize: '14px',
color: '#9ca299',
textDecoration: 'underline',
};
AirbnbReviewEmail.tailwindConfig = tailwindConfig;

const hr = {
borderColor: '#cccccc',
margin: '20px 0',
};

const footer = {
color: '#9ca299',
fontSize: '14px',
marginBottom: '10px',
};
export default AirbnbReviewEmail;
11 changes: 11 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 @@ -19,6 +19,17 @@ export default {
notion:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
aws: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
airbnb: [
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen-Sans',
'Ubuntu',
'Cantarell',
'Helvetica Neue',
'sans-serif',
],
},
},
} satisfies TailwindConfig;
Loading