JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Gmail desktop web app doesn't support <style> tag in head so have to inline the styles to elemnts -->
    <style>
        table.column-1-2 {
            margin-right: 25px;
        }

        a:hover {
            text-decoration: underline !important;
        }

        a.no-underline:hover {
            text-decoration: none !important;
        }
        /* Most mobile clinets supports css @media queries so you can define styles for theme here */
        @media only screen and (max-width: 640px) {
            .wrapper {
                margin: 0 !important;
                padding: 0 !important;
            }

            .container {
                width: 100% !important;
                max-width: 100% !important;
            }

            table.column-1-2 {
                float: none !important;
                margin-right: 0 !important;
                width: 100% !important;
                text-align: center !important;
            }


            .brand {
                padding: 0 24px 0 24px !important;
                text-align: center !important;
            }

                .brand img {
                    margin: 0 auto !important;
                    width: 100px;
                    height: 69px;
                }

            .strapline {
                margin: 8px 24px 16px 24px !important;
                text-align: center !important;
            }

            .footer {
                margin: 48px 24px 104px 24px !important;
            }
        }

        /* Override the .container width for email clients supporting <style> and @media queries */
        @media only screen and (min-width: 641px) {
            .container {
                max-width: 700px !important;
            }
        }
   ...