JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Save the Date</title>
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700|Playfair+Display:400,700" rel="stylesheet" type="text/css">
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700|Playfair+Display:400,700');
    </style>
    <!--<![endif]-->
    <style>
        /* Add fallback fonts for better email client compatibility */
        body {
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        /* Email clients often strip out head styles, so use inline styles for important elements */
    </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f0f0f0; font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
<!-- Preview Text -->
    <div style="display: none; max-height: 0px; overflow: hidden;">
        Thank you for coming to Rozina &amp; Ara's wedding celebration.
        <!-- Add extra spaces to push rest of email content beyond preview area -->
       ...