JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Attached Single Family Form</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>

</head>
<body id="main_body" >
	
	<img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>Attached Single Family Form</a></h1>
		<form id="form_919278" class="appnitro"  method="post" action="">
					<div class="form_description">
			<h2>Attached Single Family Form</h2>
			<p>* = Required Field</p>
		</div>	
			<h4>Status</h4>

				
        	<li class="section_break">
			
		</li>							
			<ul >
			
					<li id="li_2" >
                    
		<label class="description" for="element_2"> </label>
		<span>
			<input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_2_1">Active</label>
<input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_2_2">Under Contact</label>
<input id="element_2_3" name="element_2_3" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_2_3">Withdrawn</label>
<input id="element_2_4" name="element_2_4" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_2_4">Sold</label>

		</span> 
		</li>		<li class="section_break">
			<h3>Listing Agent Information*</h3>
			<p></p>
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Listing Agent ID*: </label>
		<div>
			<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Name*: </label>
		<div>
			<input id="element_4"...

CSS

body
{
	background:#fffff;
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size:small;
	margin:8px 0 16px;
	text-align:center;
}

#form_container
{
	background:#fff;
	border:1px solid #ccc;
	margin:0 auto;
	text-align:left;
	width:960px;
}

#top
{
	display:block;
	height:10px;
	margin:10px auto 0;
	width:960px;
}

#footer
{
	width:960px;
	clear:both;
	color:#999999;
	text-align:center;
	width:960px;
	padding-bottom: 15px;
	font-size: 85%;
}

#footer a{
	color:#999999;
	text-decoration: none;
	border-bottom: 1px dotted #999999;
}

#bottom
{
	display:block;
	height:10px;
	margin:0 auto;
	width:960px;
}

#container1 {
	
}

form.appnitro
{
	margin:20px 20px 0;
	padding:0 0 20px;
}

/**** Logo Section  *****/
h1
{
	background-color:#dedede;
	margin:0;
	min-height:0;
	padding:0;
	text-decoration:none;
	text-indent:-8000px;
	
}

h1 a
{
	
	display:block;
	height:100%;
	min-height:40px;
	overflow:hidden;
}

h4
{
	display:block;
	overflow:hidden;
	font-size:175%;
	font-weight:700;
	margin:0 0 5px;
}


img
{
	behavior:url(css/iepngfix.htc);
	border:none;
}

/**** 3 Columns ****/
#container1 {
    float:left;
    width:100%;
	margin-top: 20px;
}
#col1 {
    float:left;
    width:33%;
}
#col2 {
    float:left;
    width:33%;
}
#col3 {
    float:left;
    width:33%;
}

/**** 4 Columns ****/
.wrapper{
   margin: 20px auto;

   width: 960px;

   
}

.left1{
   float: left;
   margin-right: 20px;
   width: 150px;
   
}
.left2{
   float: left;
   margin-right: 20px;
   width: 150px;
   
}
.left3{
   float: left;
   margin-right: 20px;
   width: 150px;
   
}
.right{
   float: right;
   width: 450px;
   
}

/**** 5 Columns ****/
#container5 {
    float:left;
    width:100%;
	margin-top: 20px;
}
#sec1 {
    float:left;
    width:19.5%;
	padding-right: 1px;
}
#sec2 {
    float:left;
    width:19.5%;
	padding-right: 1px;
}
#sec3 {
    float:left;
    width:19.5%;
	padding-right: 1px;
}
#sec4 {
    float:left;
    width:19.5%;
	padding-right: 1px;
}
#sec5 {
   ...