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">
						<table class="fixed-row" width="600" 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 style="text-align: center;">
                                        <h1>Fixed Navigation</h1>
									</td>
								</tr>
							</table>
							</td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
							<!-- 1 column | NAVIGATION -->
			<table class="fixed-row" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td>
					<table class="col-12" width="600" align="left" cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td>
							<table class="block-content" align="center" cellspacing="0" cellpadding="0" border="0">
								<tr>
									<td>
										<table id="navigation" class="mobile-hide" width="600" height="35" align="center" cellspacing="0" cellpadding="0" border="0">
											<tr>
												<td>
												<a href="#">Link 1</a>
												</td>
												<td class="nav-spacer" width="1"></td>
												<td>
													<a href="#">Link 2</a>
												</td>
												<td class="nav-spacer" width="1"></td>
												<td>
													<a href="#">Link 3</a>
												</td>
												<td class="nav-spacer" width="1"></td>
												<td>
													<a href="#">Link 4</a>
												</td>
                                                <td class="nav-spacer"...

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: #FFFFFF;
		border-top: 1px solid #CACACA;
		border-left: 1px solid #CACACA;
		border-right: 1px solid #CACACA;
        border-bottom: 1px solid #CACACA;
	}

	#navigation td {
		text-align: center;
	}

	#navigation td a {
		color: #606060;
		font-family: Arial, Helvetica,...