JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; outline: 1px solid gray;">
    <tr>
        <td style="text-align: center; vertical-align: top; font-size: 0;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
            <![endif]-->
            <div style="width: 300px; display: inline-block; vertical-align: top;">
                <table width="100%">
                    <tr>
                        <td style="font-size: 12px;text-align:left;">Hello!</td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td>
            <![endif]-->
            <div style="width: 300px; display: inline-block; vertical-align: top;">
                <table width="100%">
                    <tr>
                        <td style="font-size: 12px;text-align:left;">Hello!</td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

CSS

div {
    outline: 1px solid #4e9ad3;
}

@media screen and (min-width: 601px) {
    .container {
        width: 600px!important;
    }
}