JSFiddle - React, Tailwind, and code Playground

by alexcat

HTML

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Email</title>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" class="body">
        <tr>
            <td>&nbsp;</td>
            <td class="container">
                <div class="content">

                    <!-- START CENTERED WHITE CONTAINER -->
                    <table class="main">
                        <tr class="main_1">
                            <td class="wrapper">
                                <a>CHALLENGELY</a>
                            </td>
                        </tr>
                        <!-- START MAIN CONTENT AREA -->


                        <tr class="main_2">
                            <td class="wrapper">
                                <table class="main-content" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="main-content-wrapper">
                                            
                                            
                                            
                                            
                                            <h2>Let the good times roll</h2>
<p>Your Challenge is live! Time to.</p>
<p>Your Challenge is live! Time to.</p>

<!-- cta -->
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tbody>
        <tr>
            <td class="centered" align="center">
                <table class="centered-inline" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td class="cta">
                                <a href="@Model.ShareLink" target="_blank">Share the Challenge</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
       ...

CSS

.ExternalClass {
            width: 100%;
        }

            .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
                line-height: 100%;
            }

        .apple-link a {
            color: inherit !important;
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
            text-decoration: none !important;
        }

        .btn-primary table td:hover {
            background-color: #fc9164 !important;
        }

        .btn-primary a:hover {
            background-color: #fc9164 !important;
            border-color: #fc9164 !important;
        }



        .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
        }

        body {
            font-family: sans-serif;
            -webkit-font-smoothing: antialiased;
            font-size: 14px;
            line-height: 1.4;
            margin: 0;
            padding: 0;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            background-color: #f6f6f6;
        }

        table[class=body] {
            border-collapse: separate;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            width: 100%;
        } 

        table > td {
            font-family: sans-serif;
            font-size: 14px;
            vertical-align: top;
        }

        td[class=container] {
            font-family: sans-serif;
            font-size: 14px;
            vertical-align:...