JSFiddle - React, Tailwind, and code Playground

by hirenshah

HTML

<body bgcolor="#C0C0C0">
    <!--[if (mso)|(IE)]>
        <table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
                <![endif]-->
                <table class="container" width="650px" cellpadding="0" cellspacing="0" style="min-width: 350px; background-color: white; margin-left: auto; margin-right: auto; padding:20px;">
                    <tr>
                        <td>
                            <!-- Header Table Start -->
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="alignrightonmobile">
                                        <!--[if (mso)|(IE)]>
                                            <img id="banner" class="topbanner" src="http://hirenshah.co.uk/poc/logo_low.png" width="100px" height="75px" />
                                            <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
                                            <![endif]-->
                                            <img id="banner" class="topbanner" src="http://hirenshah.co.uk/poc/logo.png" width="100px" height="75px" />
                                            <!--[if (mso)|(IE)]>
                                            </div>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>Quote Reference ABC123456
                                        <br>
                                        <br>
                                    </td>
                                </tr>
                            </table>
                            <table width="100%"...

CSS

/* MOBILE */
 @media screen and (max-width: 649px) {
    .container {
        width:100% !important;
    }
    * {
        font-family: Verdana;
        color:red !important;
    }
    .alignrightonmobile {
        text-align:left !important;
    }
}
/* ALL DEVICES/CLIENTS */
 * {
    font-family: Verdana;
    color:blue;
}
.alignrightonmobile {
    text-align:right;
}