JSFiddle - React, Tailwind, and code Playground

by no1uknow

HTML

<div id="outerWrapper">
	<div id="fullWidthContact">
			
		<form class="gradient">
			
			<fieldset class="partOne">
				<legend>Part 1: Simple Contact</legend>
				<ol>	
					<li class="floatL"><label for="First-Name">*First Name</label><br>
					<input type="text" name="First-Name" id="First-Name" placeholder="Required" autofocus required><br></li>
					
					<li class="floatR"><label for="Last-Name">Last Name</label><br>
					<input type="text" name="Last-Name" id="Last-Name" ><br></li>
					
					<li class="floatL"><label for="City">City/Town</label><br>
					<input type="text" name="City" id="City"><br></li>

					<li class="floatR"><label for="Prov">Province</label><br>
					<input type="text" name="Prov" id="Prov" value="Ontario"><br></li>
					
					<li class="floatL"><label for="Email">*Email</label><br>
					<input type="email" name="Email" id="Email" placeholder="Required" required><br></li>
					
					<li class="floatR"><label for="Tel1">Telephone</label><br>
					<input type="text" name="Tel1" id="Tel1" placeholder="###-###-####"><br></li> 							
					
					<li class="clear"><label for="Comment1">Your comments:</label><br>
					<textarea name="Comment1" id="Comment1"></textarea></li>
				</ol>
			
			</fieldset>
			
			<fieldset class="partTwo">
				<legend>Part 2: Quick Assessment (optional)</legend>
					<div class="formInput1">
						<label for="DebtUnSec">Estimated Unsecured Debt</label><br>
						<span>$</span><input type="text" name="DebtUnSec" id="DebtUnSec" >
						<p class="subscript">Credit Cards, Loans, etc.</p><br>
					</div>
					
					<div class="formInput2">
						<label for="DebtSec">Estimated Secured Debt</label><br>
						<span>$</span><input type="text" name="DebtSec" id="DebtSec" >
						<p class="subscript">Mortgage, Car Loans etc.</p><br>
					</div>

					<div class="formInput3">
						<label for="Income">Monthly NET Income</label><br>
						<span>$</span><input type="text" name="Income" id="Income">
						<p...

CSS

/* RESET http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border-style: none;
	border-color: inherit;
	border-width: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	margin: 0;
	
	}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body 	{ line-height: 1; }
ol, ul	{list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {	
	content: '';
	content: none;	
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}


/* LAYOUT OF TCS DRAFT 1 */

#outerWrapper {	
	width:960px;
	margin:0px auto; 
	overflow:visible; 
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size:14px;
	color:black;
	}



.center					{ text-align:center;  }
.clear					{ clear:both }
.floatL					{ float:left }
.floatR					{ float:right }
.subscript				{ font-size:90%; font-family:"Calibri"; text-align:center; }


#fullWidthContact		{ 
						margin:0 auto;
						background-image:url('../images/Possiblities1.png');
						background-repeat:no-repeat; 
						background-position:left bottom;
						} 
#fullWidthContact p	 	{ line-height:160%; text-align:justify }

#fullWidthContact h1			{ padding-bottom:20px }
#fullWidthContact .subscript	{ font-size:90%; font-family:"Calibri"; text-align:center; line-height:100% }

form					{ 
						width:600px;
						padding:10px 5px;
						border:7px #1a5278...