Overview
In today’s modern world, email plays an important role for any business, starting from a welcome email to a subscription email and many others. I’m happy to show you how to write an email template in ReactJS.
HTML Email Template
Code
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style type="text/css">
table { border: 0px;}
</style>
</head>
<body style="margin: 0px; padding: 0px;" >
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#f2f2f2">
<tr><td height="40"></td></tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="600" align="center">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="100%">
<tr><td height="20"></td></tr>
<tr><td height="10" style="background: #363636;"></td></tr>
<tr>
<td style="background: #363636;" align="center">
<a href="https://www.google.co.in" style=" font-family: 'Lato', sans-serif; font-size: 25px; display: block; color: #fff; text-decoration: none;">Logo</a>
</td>
</tr>
<tr><td height="10" style="background: #363636;"></td></tr>
</table>
</td>
</tr>
<tr><td height="5" style=" line-height: 0px;"></td></tr>
<tr>
<td bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="88%" align="center">
<tr><td height="40"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 18px; line-height: 26px; letter-spacing: 1px; color: green;">Dear Member,</td></tr>
<tr><td height="15"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 15px; line-height: 20px; letter-spacing: 1px; color: #333;"> <strong>We have received inquiry from below person .Please find details.</strong></td></tr>
<tr><td height="25"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 1px; color: #333;"> Full Name: <strong> John Miller </strong></td></tr>
<tr><td height="5"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 1px; color: #333;"> Email Address: <strong><a href="mailto:help@test.com" style="color: #333;">help@test.com</a></strong></td></tr>
<tr><td height="5"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 1px; color: #333;"> Contact Number: <strong>1234567890.</strong></td></tr>
<tr><td height="5"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 1px; color: #333;"> Message: <strong>We look forward to seeing you on 3 July 2018 at 11 AM.</strong></td></tr>
<tr><td height="25"></td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 1px; color: #333;">Best Regards,</td></tr>
<tr><td style="font-family: 'Lato', sans-serif; font-size: 18px; line-height: 26px; letter-spacing: 1px; color: green;">Yudiz</td></tr>
<tr><td height="30"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="5" style="line-height: 0px;"></td></tr>
<tr>
<td bgcolor="green">
<table cellspacing="0" cellpadding="0" width="94%" align="right">
<tr><td height="5" style=" line-height: 0px;"></td></tr>
<tr>
<td><a href="https://www.google.co.in" style=" font-family: 'Lato', sans-serif; text-decoration: none; color: #fff; font-size: 12px; line-height: 26px; font-weight: lighter; letter-spacing: 1px;">© Test 2021 | All rights reserved</a></td>
</tr>
<tr><td height="5" style=" line-height: 0px;"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="60"></td></tr>
</table>
</body>
</html>
Output
Creating our own Custom View
Code – use in .jsx file
export default function EmailContent(props) {
// Style 1 (Using Internal Style)
const mystyle1 = {
width: "100%",
height: "100vh",
background: "#f2f2f2"
};
const mystyle2 = {
margin: "0 auto",
width: "600px"
};
const mystyle3 = {
cellspacing: "0",
cellpadding: "0",
width: "100%",
background: "#363636"
};
const mystyle4 = {
paddingLeft: "15px",
display: "block"
};
// Style 2 (Using Inline Style i.e. Highlighted Part)
return (
<div>
<table cellPadding="0" cellSpacing="0" style={mystyle1}>
<tr><td height="35"></td></tr>
<tr>
<td>
<table cellPadding="0" cellSpacing="0" style={mystyle2} align="center">
<tr>
<td>
<table style={mystyle3}>
<tr><td height="10"></td></tr>
<tr>
<td align="center" style={mystyle4}>
<a href="https://www.google.co.in" style={{ width: "80px", filter: "brightness(100)", fontSize: "25px", color: "#fff"}}>Logo</a>
</td>
</tr>
<tr><td height="10"></td></tr>
</table>
</td>
</tr>
<tr>
<td style={{ background: "#fff" }}>
<table cellsSacing="0" cellPadding="0">
<tr>
<td align="center" style={{ paddingLeft: "30px" }}>
<table cellSpacing="0" cellPadding="0">
<tr><td height="40"></td></tr>
<tr><td style={{ fontSize: "18px", lineHeight: "26px", letterSpacing: "1px", color: "green" }}>Dear Member,</td></tr>
<tr><td height="15"></td></tr>
<tr><td style={{ fontSize: "15px", lineHeight: "20px", letterSpacing: "1px", color: "#333" }}> <strong>We have received inquiry from below person .Please find details.</strong></td></tr>
<tr><td height="25"></td></tr>
<tr><td style={{ fontSize: "14px", lineHeight: "20px", letterSpacing: "1px", color: "#333" }}> Full Name: <strong>John Miller</strong></td></tr>
<tr><td height="5"></td></tr>
<tr><td style={{ fontSize: "14px", lineHeight: "20px", letterSpacing: "1px", color: "#333" }}> Email Address: <strong><a href="mailto:help@9test.com" style={{ color: "#333" }}>help@test.com</a></strong></td></tr>
<tr><td height="5"></td></tr>
<tr><td style={{ fontSize: "14px", lineHeight: "20px", letterSpacing: "1px", color: "#333" }}> Contact Number: <strong>1234567890.</strong></td></tr>
<tr><td height="5"></td></tr>
<tr><td style={{ fontSize: "14px", lineHeight: "20px", letterSpacing: "1px", color: "#333" }}> Message: <strong>We look forward to seeing you on 7 April 2021 at 11 AM.</strong></td></tr>
<tr><td height="25"></td></tr>
<tr><td style={{ fontSize: "14px", fontWeight: "600", lineHeight: "20px", letterSpacing: "1px", color: "#333" }}>Best Regards,</td></tr>
<tr><td style={{ fontSize: "14px", fontWeight: "700", lineHeight: "22px", letterSpacing: "1px", color: "green" }}>Yudiz</td></tr>
<tr><td height="30"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="5"></td></tr>
<tr>
<td style={{background: "green"}}>
<table cellSpacing="0" cellPadding="0" width="95%" align="right">
<tr><td height="5"></td></tr>
<tr>
<td><a href="https://www.google.co.in" style={{textDecoration: "none", color: "#fff", fontSize: "12px", lineHeight: "26px", fontWeight: "lighter", letterSpacing: "1px"}}>© Test 2021 | All rights reserved</a></td>
</tr>
<tr><td height="5"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="40"></td></tr>
</table>
</div>
)
}Output
Results
Output will be same, Difference is Just Written Style Code
Conclusion
I hope that this blog might be useful to you. We will come up with an update about “Responsive ReactJS Email Template” on the same channel, so stay in touch.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
