JSFiddle - React, Tailwind, and code Playground

by danimalnelson

HTML

<body bgcolor="#eeeeee" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#eeeeee !important; background-color:#eeeeee !important;-webkit-text-size-adjust:none;">

<!-- HEADER TABLE -->
<table id="header-table" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td align="center">

			<!-- LOGO AND BUTTON -->
			<table id="logo-table" class="table" width="600px" align="center" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td align="center" valign="middle" border="0" cellpadding="0" cellspacing="0">
						<table class="toggle-display" align="left" width="33.333333333%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td>&nbsp;</td>
							</tr>
						</table>
						<table class="table-top" align="left" width="33.333333333%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td id="logo-row" width="100%" align="center" valign="middle" style="height:80px;line-height:80px;">
									<a href="#"><img src="images/logo.jpg" width="140" height="15" alt="Trunk Club"></a>
								</td>
							</tr>
						</table>
						<table class="table-top" align="left" width="33.333333333%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="100%" align="right" valign="middle" style="height:80px;line-height:80px;">
									<table>
										<tr>
											<td align="right"><a href="#" class="button-link">Request A Trunk</a></td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			
		</td>
	</tr>
</table>

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="background:#eeeeee; background-color:#eeeeee;">
	<tr>
		<td style="height:40px; line-height:40px;">&nbsp;</td>
	</tr>

	<tr>
		<td align="center">
		
			<!-- MAIN TABLE -->		
			<table id="main-table" class="table" width="600px" align="center" border="0"...

CSS

/* RESET */
a, img {
	outline: none !important;
	border: none !important;
}

table {
	border-spacing: 0 !important;
	border-collapse: collapse !important;
}

/* TYPE */
h1,
.h1-header {
	font-size: 24px !important;
	font-family: Georgia, 'Times New Roman', serif !important;
	font-weight: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}

h3,
.h3-header {
	border-top-width: 1px !important;
	border-top-style: solid !important;
	border-top-color: #dddddd !important;
	border-bottom-width: 1px !important;
	border-bottom-style: solid !important;
	border-bottom-color: #dddddd !important;
	height:26px !important;
	line-height:26px !important;
	font-family: Verdana, Helvetica, Arial, sans-serif !important;
	font-size: 9px !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	color: #999 !important;
	letter-spacing: 1px !important;
}

h4,
.h4-header {
	text-transform: uppercase !important;
	font-weight: bold !important;
}

p.large,
p#post-intro {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-size: 16px !important;
	line-height: 24px !important;
	padding: 0 8% !important;
	text-align: center !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
}

p,
p.post-paragraph {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-size: 14px !important;
	line-height: 24px !important;
	text-align: left !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 15px !important;
	margin-left: 0 !important;
	padding: 0 !important;
}

p#post-intro a,
p.post-paragraph a {
	text-decoration: underline !important;
	color: #000 !important;
}

/* BUTTONS */
.button-link {
	background-color:#2d7786 !important;
	color: white !important;
	font-family: Verdana, Helvetica, Arial, sans-serif !important;
	font-weight: bold !important;
	font-size: 9px !important;
	text-transform:uppercase...