JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<div class="ajaxDiv">
<ul class="assetCoverage">
    <li>
        <label>
        <strong>Contract</strong>
        </label>
        <br>
        <input type="text" class="form-input"  value="123456" disabled>
    </li>
    <li>
        <label>
        <strong>Site</strong>
        </label>
        <br>
        <input type="text" class="form-input" value="123-456" disabled>
    </li>
    <li>
        <label>
        <strong>Model Number</strong>
        </label>
        <br>
        <input type="text" class="form-input" value="112-334-566" disabled>
    </li>
</ul>
<br>
<div class="fl">
<button class="btn-table-disabled">Previous Model</button>
</div>
<div class="fr">
<button class="btn-table">Next Model</button>
</div>
<div class="clr"></div>
<hr>
<div id="popup-coverages-overflow">
<table class="table fl">
<thead>
    <tr>
        <th>Daily Hours</th>
        <th><div class="dayTimeWidth">Sun</div></th>
        <th><div class="dayTimeWidth">Mon</div></th>
        <th><div class="dayTimeWidth">Tues</div></th>
        <th><div class="dayTimeWidth">Wed</div></th>
        <th><div class="dayTimeWidth">Thu</div></th>
        <th><div class="dayTimeWidth">Fri</div></th>
        <th><div class="dayTimeWidth">Sat</div></th>
    </tr>
</thead>
<tbody>
	<tr>
		<td>Coverage Start</td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
	</tr>
	<tr>
		<td>Break Start</td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text" class="form-input" value="00:00"></td>
		<td><input type="text"...

CSS

/************************************************************************
******CSS FOR ELEMENTS***************************************************
************************************************************************/
footer {
	padding-top: 50px;
}

hr {
	margin: 15px 0 15px 0;
}
/************************************************************************
******NEW CSS************************************************************
************************************************************************/
.tag {
	background-color: #f8d18b;
}
.coverages-tbl {
	min-width: 100%;
}

.ro {
	background-color: #e8e8e8;
}

/* Folder function POPUP CSS */
#popup-field-overflow {
	max-height: 550px;
	overflow: scroll;
	margin:  0, 0, 5px, 0;
}
#popup-folder-menu p {
	margin-bottom: 5px;
}

.folder-table tbody td {
	text-align: center;
}

.folder-table tbody td i {
	font-size: 15px;
}

.folder-table tbody td:first-child {
	text-align: left;
}

.folder-table div.slider {
	width: 175px;
	margin-right: 25px;
}
/*
.ui-slider .ui-slider-handle {
	width:2em;
	left:-.6em;
	text-decoration:none;
	text-align:center;
}
*/
#addressResults_length {
	width: 100%;
	margin-bottom: 10px;
}

.columnView {
	width: 600px;
	margin: 0 auto;
	display: inline-block;
	margin-bottom: 10px;
}

.columnViewTable {
	width: 100%;
	border: none;
	border-collapse: collapse;
	border: 1px solid #b8b8b8;
}

.columnViewTable td {
	width: 50%;
	font-size: 14px;
	border-bottom: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	color: #808080;
	padding: 5px 3px;
}

.showSearchFields, .hideSearchFields {
    margin-bottom: 5px;
    color: #db4016;
    /*no highlighting with the cursor*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none; 
}

tr.move-row td, tr.add-row td, tr.change-row td, tr.cancel-row td, tr.swap-row td {
	color: #636363;
}

tr.move-row td a, tr.add-row td a, tr.change-row td a, tr.cancel-row td a, tr.swap-row...