React Mail Visualiser
Docs
HTML Input
React Component
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome Email</title> </head> <body style="margin: 0; padding: 0; font-family: sans-serif; background-color: #f4f4f5;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="padding: 40px 0;"> <table width="600" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05);"> <tr> <td style="padding: 40px; text-align: center; background-color: #18181b; color: #ffffff;"> <h1 style="margin: 0; font-size: 24px; font-weight: bold;">Welcome to React Mail Visualiser</h1> </td> </tr> <tr> <td style="padding: 40px;"> <p style="margin: 0 0 20px; color: #333333; line-height: 1.6;">Hello there,</p> <p style="margin: 0 0 20px; color: #555555; line-height: 1.6;"> This is a preview of your email template. You can edit the HTML on the left and see the changes instantly on the right. </p> <div style="text-align: center; margin-top: 30px;"> <a href="#" style="display: inline-block; padding: 12px 24px; background-color: #000000; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: bold;">Get Started</a> </div> </td> </tr> <tr> <td style="padding: 20px; text-align: center; background-color: #f4f4f5; color: #888888; font-size: 12px;"> © 2024 React Mail Visualiser. All rights reserved. </td> </tr> </table> </td> </tr> </table> </body> </html>
Preview
Desktop
Mobile