JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table" bgcolor="#282828">
  <tr>
    <td align="center" ><table class="w600" style="margin:0 10px;"  width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td class="w600" width="600" height="20" bgcolor="#282828" border="0"></td>
        </tr>
        <tr>
          <td class="w600" width="600"><table id="top-bar" class="w600" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#282828">
            </table></td>
        </tr>
        <tr>
          <td class="w600" width="600" bgcolor="#000001" border="0" align="center"><img editable label='header image' src="images/top.jpg" class="header" width="600" border="0" style="display:block;text-align:center;margin: 0;padding: 0;"></td>
        </tr>
        
          <td><table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td class="w100" width="100" bgcolor="#000001" border="0"></td>
                <td class="w400 article-content" width="400" bgcolor="#000001" border="0" style="color:#FFFFFF !important"><span style="text-align:center;">
                  <p>&nbsp;</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu tempus nulla. Duis eu tellus tristique, mollis felis at, pharetra libero. Suspendisse pretium justo quis diam ullamcorper venenatis. Duis ac est est. Donec justo magna, varius eu lorem nec, varius lobortis dolor. Mauris et est mauris. Nulla facilisi. </p>
                  </span></td>
                <td class="w100" width="100" bgcolor="#000001" border="0"></td>
              <tr>
                <td class="w100" width="100" bgcolor="#000001" border="0"></td>
                <td class="w400 article-content" width="400" bgcolor="#000001" border="0" style="color:#FFFFFF !important"><span style="text-align:center;">
                  <p>When: <span style="color:#ef4541; text-align:center;">xxxxxx</span></p>
        ...

CSS

#outlook a {
	padding: 0;
}	/* Force Outlook to provide a "view in browser" button. */
body {
	width: 100% !important;
}
.ReadMsgBody {
	width: 100%;
}
.ExternalClass {
	width: 100%;
	display: block !important;
} /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body {
	background-color: #ececec;
	margin: 0;
	padding: 0;
}
img {
	outline: none;
	text-decoration: none;
	display: block;
}
a, a:link, a:visited {
	color: #ef4541;
	text-decoration: none;
}
br, strong br, b br, em br, i br {
	line-height: 100%;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 100% !important;
	-webkit-font-smoothing: antialiased;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: blue !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
	color: red !important;
}
/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
	color: purple !important;
}
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */  
table td, table tr {
	border-collapse: collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
	color: black;
	text-decoration: none !important;
	border-bottom: none !important;
	background: none !important;
}	/* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include code blocks in email. */
code {
	white-space: normal;
	word-break: break-all;
}
#background-table {
	background-color: #282828;
}
/* Webkit Elements */
#top-bar {
	background-color: #006fba;
	color: #FFFFFF;
}
#top-bar a...