JSFiddle - React, Tailwind, and code Playground

by Mike Rispoli

HTML

<table id="wrapper-table" width="100%" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td>
			<table id="content-table" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td id="content-cell">
                        	<!-- 1 column -->
	<table class="row" width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td>
			<table class="col-12" width="600" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
				<tr>
					<td>
					<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td>
                                <h1>Two Sections Without Spacer</h1>
							</td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
	<!-- end 1 column -->
                        <!-- begin section -->
                        <table class="row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td>
                                    <!-- First Column | left sidebar -->
                                    <table class="col-3" width="148" align="left" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; border-left: 1px; border-right: 1px;">
                                        <tr>
                                            <td>
                                                <table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
                                                    <tr>
                                                        <td height="200" style="background: #000; color: #fff;">
                                                        
                                                        col-3
                     ...

CSS

/* 
>>>>> CSS standards <<<<<
	1. Public Broadcast TeleVision | List css as: position, box-model, typographic, visual;
	2. Attributes with a single property should appear inline
	3. List comma separated selectors
	4. Pre-mailer will make all styles inline before send
*/

/* ========== css reset styles to normalize behaviour ========== */
body {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

img {
	border: 0 none;
	height: auto;
	line-height: 100%;
	text-decoration: none;
	outline: none;
	-ms-interpolation-mode: bicubic;  
}

a img { border: 0 none; }

/* normalizes image behavior by removing padding on top and bottom in gmail / yahoo */
.image-reset img,
img.image-reset { display: block; } 

table, 
td { 
	border-collapse: collapse; 
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}

#wrapper-table {
	margin: 0;
	padding: 0;
}

/* fixes outlook appended ExternalClass to elements */

.ExternalClass {
    width:100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
    line-height: 100%;
}

/* normalizes outlook generated view in browser link */

#outlook a {
    padding: 0;
}

/* ========== end css reset ========== */

/* ========== utilities ========== */

.desktop-hide {
	display: none;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	float: left;
	font-size: 0;
	line-height: 0;
	mso-hide: all;
}

.desktop-hide img,
img.desktop-hide {
	max-height: 0;
	width: 0;
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

#navigation {
	background-color: #F5F5F5;
	border-top: 1px solid #CACACA;
	border-left: 1px solid #CACACA;
	border-right: 1px solid #CACACA;
}

#navigation td {
	text-align: center;
}

#navigation td a {
	color: #606060;
	font-family: Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 16px;
	text-decoration: none;
}

#navigation .nav-spacer {
	background-color:...