Jayanth
NNovu
•Created by Jayanth on 2/17/2025 in #💬│support
React-email with Novu: Template structure breaks
Hi @Pawan Jain ,Can you please help me with this?
12 replies
NNovu
•Created by Jayanth on 2/17/2025 in #💬│support
React-email with Novu: Template structure breaks
Hi @Pawan Jain ,
Did you get the same issue i am facing while sending this email?
12 replies
NNovu
•Created by Jayanth on 2/17/2025 in #💬│support
React-email with Novu: Template structure breaks
const BaseEmailTemplate = ({
userName,
previewText ,
}: BaseEmailProps) => {
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind
config={{
theme: {
extend: {
colors: {
},
fontFamily: {
},
},
},
}}
>
<Body className="bg-background-color mx-auto mt-0 mb-0 font-inter flex flex-col h-screen">
<Container className="max-w-[600px] mx-auto pt-[15px] pr-[32px] pl-[32px] bg-white">
<Section className="">
<Img alt="Logo" height={38.93} width={114.8} src="" />
<Hr className="mt-[15px] mb-[8px] border-t-2 border-gray-300 ml-0 -mr-[10px] flex-none" />
</Section>
</Container>
<Container className="flex-1 text-sm/[] text-content-color max-w-[600px] mx-auto pt-[15px] pr-[32px] pb-[15px] pl-[32px] bg-white flex items-start">
<Section className="my-4">
<Text className="text-title-color text-2xl/4 font-semibold font-inter">Title
</Text>
</Section>
<Text>Hi {userName},</Text>
<Text>
some text
</Text>
<Text>
Some text
</Text>
<Section className="font-inter text-content-color]">
<Text className=" text-sm/[20px] font-normal m-0">
Thank you,
</Text>
<Text className=" text-sm/[20px] font-normal m-0">
From Team
</Text>
</Section>
</Container>
<Container className="max-w-[600px] mx-auto pt-[15px] pr-[32px] pb-[15px] pl-[32px] bg-white mt-auto">
<Section className="text-color-footer-text-color text-xs/[18px] text-center my-0 flex-none font-inter">
<Text> footer</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export function renderMail(payload: BaseEmailProps) {
return render(<BaseEmailTemplate {...payload} />);
}
12 replies