This is the preview text of the email
">
This is the preview text of the email
">
This is the preview text of the email
">
import {
Body,
Button,
Container,
Column,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Row,
Section,
Text,
Tailwind,
} from "@react-email/components";
export default function Email() {
return (
<Html lang="en" dir="ltr">
<Head />
<Preview>This is the preview text of the email</Preview>
<Tailwind>
<Body className="bg-gray-500 max-w-[480px] mx-auto my-auto">
<Container className="bg-white mt-[32px] p-[20px] leading-[24px] tracking-normal">
<Section>
<Row>
<Column className="max-w-[32px]" align="left" width="32px">
<Img
src="<https://tinypic.host/images/2024/07/13/white-on-blue.png>"
width="32px"
/>
</Column>
<Column>
<Heading
as="h2"
className="text-[20px] font-medium ml-2 text-blue-600"
>
MidnightUI
</Heading>
</Column>
</Row>
</Section>
<Img
src="<https://tinypic.host/images/2024/07/13/woman_cheerful-480.png>"
alt="woman cheerful 480"
className="rounded mt-4 mb-[40px]"
/>
<Heading className="text-[31px] font-semibold text-gray-950">
Welcome to MidnightUI
</Heading>
<Text className="text-[16px] text-gray-600">
We're thrilled to have you join us on this exciting journey. Get
ready to dive into a world where your creativity knows no bounds,
and stunning visual products come to life.
</Text>
<Text className="text-[16px] text-gray-600">
Whether you’re here to elevate your brand, champion a cause, or
simply explore for fun, you’re in the right place. We're here to
support you every step of the way, ensuring your experience is as
amazing as your ideas.
</Text>
<Section className="mt-[20px]">
<Hr
className="max-w-[150px] mb-4"
align="left"
style={{ backgroundColor: "#f3f4f6" }}
/>
<Link
href="#"
className="text-[16px] text-blue-600 underline underline-offset-2"
>
MidnightUI Dev Log →
</Link>
<Text className="text-[16px] text-gray-600">
Weekly new updates and improvements to MidnightUI.
</Text>
<Hr
className="max-w-[150px] mb-4"
align="left"
style={{ backgroundColor: "#f3f4f6" }}
/>
<Link
href="#"
className="text-[16px] text-blue-600 underline underline-offset-2"
>
Follow us on LinkedIn →
</Link>
<Text className="text-[16px] text-gray-600">
Stay up-to-date with the latest announcements and jobs.
</Text>
<Hr
className="max-w-[150px] mt-6 mb-4"
align="left"
style={{ backgroundColor: "#f3f4f6" }}
/>
<Link
href="#"
className="text-[16px] text-blue-600 underline underline-offset-2"
>
Why we are building MidnightUI →
</Link>
<Text className="text-[16px] text-gray-600">
MidnightUI is the new wave of email design systems.
</Text>
<Hr
className="max-w-[150px] mt-6 mb-4"
align="left"
style={{ backgroundColor: "#f3f4f6" }}
/>
</Section>
<Text className="text-[16px] text-gray-600">
We're excited to have you on board and can't wait to see what
you'll create with MidnightUI.
</Text>
<Text className="text-[16px] text-gray-600">
If you have any questions, need assistance, or just want to share
your thoughts, don't hesitate to reach out.
</Text>
<Text className="text-[16px] text-gray-600">
You can send us a message at{" "}
<Link
className="text-blue-600 underline underline-offset-2"
href="#"
>
[email protected]
</Link>{" "}
or connect with us on{" "}
<Link
className="text-blue-600 underline underline-offset-2"
href="#"
>
Linkedin
</Link>
. Your feedback and inquiries are important to us, and we’d love
to hear from you.
</Text>
<Text className="text-[16px] text-gray-600">
Together, let's make something amazing!
</Text>
<Section>
<Button
href="<https://example.com>"
className="bg-blue-600 text-white font-bold py-2 px-4 rounded mt-4"
>
Get Started
</Button>
</Section>
<Section>
<Row className="mt-[40px]">
<Column align="right" style={{ width: "45%" }}>
<Link href="#">
<Img
src="<https://tinypic.host/images/2024/07/13/X.png>"
alt="X"
border="0"
width="22px"
/>
</Link>
</Column>
<Column>
<Link href="#">
<Img
style={{ margin: "auto" }}
src="<https://tinypic.host/images/2024/07/13/Linkedin.png>"
alt="Linkedin"
border="0"
width="22px"
/>
</Link>
</Column>
<Column align="left" style={{ width: "45%" }}>
<Link href="#">
<Img
src="<https://tinypic.host/images/2024/07/13/Instagram.png>"
alt="Instagram"
border="0"
width="22px"
/>
</Link>
</Column>
</Row>
</Section>
<Section>
<Text className="text-[13px] text-gray-400 text-center">
<Link
className="text-blue-600 underline underline-offset-2"
href="#"
>
MidnightUI
</Link>{" "}
is committed to helping you build your email design system. If
you'd prefer to not receive these emails, please{" "}
<Link
className="text-blue-600 underline underline-offset-2"
href="#"
>
unsubscribe
</Link>{" "}
or{" "}
<Link
className="text-blue-600 underline underline-offset-2"
href="#"
>
manage your email preferences
</Link>
.
</Text>
<Text className="text-[13px] text-gray-400 text-center">
MidnightUI 420 George Street, Sydney, NSW 2000 Australia
</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}
