JSFiddle - React, Tailwind, and code Playground

by hansheung

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body style="padding:15px;background-color:#FFF;Margin:0 !important;">
    <div class="wrapper" style="width:100%;table-layout:fixed;">
      <table class="outer-table" style="border-spacing:0;font-family:sans-serif;color:#727f80;width:100%;max-width:670px;margin:0 auto;background-color:#FFF;">
        <tr>
          <td class="image" style="padding:0;">
            <img src="http://www.talent-trust.com/documents/News2020.03/covid19-ttc_header.jpg" alt="" style="border:0;width:100%;max-width:670px;height:auto;">
          </td>
        </tr>
      </table>
      <!--End Banner Image-->
      <table class="outer-table" style="border-spacing:0;font-family:sans-serif;color:#727f80;width:100%;max-width:670px;margin:0 auto;background-color:#FFF;">
        <tr>
          <td class="image" style="padding:0;">
            <img src="http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg" alt="" style="border:0;width:100%;max-width:670px;height:auto;">
          </td>
        </tr>
      </table>
      <!--End Banner Image-->
      <table class="main-table" style="border-spacing:0;font-family:sans-serif;color:#727f80;width:100%;max-width:610px;margin:0 auto;background-color:#FFF;border-radius:6px;">
        <tr>
          <td class="one-column" style="padding:0;">
            <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#727f80;">
              <tr>
                <td class="inner-td" style="padding:0;padding:10px;font-size:16px;line-height:20px;text-align:justify;">
                  <p class="text" style='Margin:0;font-family:"Helvetica","sans-serif";line-height:150%;color:#202020;font-size:18px;text-align:inherit;padding:50px 0px !important;'>
                    As you are aware China has been experiencing an  <a...

CSS

/*--- Start Two Column Sections --*/
      /*--- Start Outer Table Banner Image, Text & Button --*/
      /*--- Media Queries --*/
      @media screen and (max-width: 400px) {
      	.h1 {
      		font-size: 22px;
      	}
      	.two-column .column, .three-column .column {
      		max-width: 100%!important;
      	}
      	.two-column img {
      	    width: 100%!important;
      	}
      }
      @media screen and (min-width: 401px) and (max-width: 400px) {
      	.two-column .column {
      		max-width: 50%!important;
      	}
      }