JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container clearfix">
    <nav class="nav">
        <ul class="toolbar">Menu
            <li><a class="dashboard current"></a>Dashboard</li>
            <li><a class="customers"></a>Customers</li>
            <li><a class="tickets"></a>Tickets</li>
            <li><a class="staff"></a>Staff</li>
            <li><a class="help"></a>Help</li>
            <!--<li><a class=""></a></li>					 
					 <li><a class=""></a></li>-->
            <li><a class="weather"></a>Cloudy</li>
        </ul>
    </nav>
    <div class="searchform">
        <form class="frmSearch">
            <input name="searchTxt" type="text" id="searchTxt" value="" class="k-textbox" placeholder="Search for a customer" />
            <button type="button" class="searchBtn">Search</button>
            <button type="button" class="searchBtn">New</button>
        </form>
    </div>
    <!--<hr />-->
    <div class="contentDiv">
        <div class="customerDesc">
            <img src="../images/customer.png" class="custDescImg" />
            	<h2 class="custTitle">ADD A CUSTOMER</h2>	
            <p class="addCustDesc">Use this page to add a new customer along with any prospective sales you believe will be possible in the near future.</p>
            <!--<hr/>--></div>
        <div class="customerType clearfix">
            <hr />
            <!--<h3 class="custTitle">Customer type</h2>-->
            <p class="custTypeLabel">Customer type</p>
            <ul class="custTypeList">
                <li><a class="custTypeImg"></a>Groundspread</li>
                <li><a class="custTypeImg"></a>Tipping</li>
                <li><a class="custTypeImg"></a>Freight</li>
                <li></li>
            </ul>
        </div>
        <div class="custFormCont clearfix">
            <hr/>
            <form id="addCustForm" name="addCustForm" class="custForm">
                <div>
                    <label for="drpTitle">Title</label>
                    <select id="drpTitle"></select>
              ...

CSS

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 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, b, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body, button, input, textarea, p, label {
    font-family:"Proxima Nova Regular", "Helvetica Neue", Calibri, "Droid Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
}
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;
}
/* CLEAR-FIX 
.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
 .clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* Gibson specific style classes */
 .k-ff {
    overflow: inherit !important;
}
.container {
    height: auto;
}
.nav {
    position: relative;
    margin: 0 0;
}
.nav ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5B9BD5;
}
.nav li {
    margin: 0;
    padding: 0 0 2px 0;
    list-style: none;
    display: inline-block;
    float:left;
   ...