JSFiddle - React, Tailwind, and code Playground

by seano666

HTML

<div class="search-box"><div class="filter-container"><span class="filter-label">Date Audit Completed:</span><div class="filter-input-controls"><input type="text" value="From" class="inputToPost datepicker hasDatepicker" id="dp1373392627802"><input type="text" value="To" class="inputToPost datepicker hasDatepicker" id="dp1373392627803"></div><input type="hidden" value="CassAuditAnswer.CassAudit.DateClosed,DateRangeFilter" class="settings"></div><div class="filter-container"><span class="filter-label">Deviation Status:</span><div class="filter-input-controls"><select class="inputToPost"><option value="__DefaultOption__">Please Select</option><option value="Pending">Pending</option><option value="Hold">Hold</option><option value="Corrected">Corrected</option></select></div><input type="hidden" value="CorrectionType.DisplayText,OptionListFilter" class="settings"></div><div class="filter-container"><span class="filter-label">City:</span><div class="filter-input-controls"><input type="text" class="inputToPost"></div><input type="hidden" value="CassAuditAnswer.CassAudit.Site.City,StringLikeFilter" class="settings"></div><div class="filter-buttons-container"><input type="button" value="Filter" class="filter-button"><input type="button" value="Reset" class="reset-button"></div></div>

CSS

.search-box {
    background-color: #465C71;
    border: 2px inset black;
    color: white;
    margin: 15px auto;
    padding: 10px;
}
.search-box .hidden-filter {
    display: none;
}
.search-box .filter-container {
    float: left;
    margin: 2px 0;
    width: 300px;
}
.search-box .filter-buttons-container {
    background-color: Red;
    clear: both;
    margin: 0 40px;
    padding: 10px;
    text-align: center;
    width: 145px;
}
.search-box .filter-buttons-container input {
    margin: 0 5px;
}
.search-box .filter-label {
    float: left;
    text-align: right;
    width: 150px;
}
.search-box .filter-input-controls {
    margin: 0 150px;
}
.search-box .filter-input-controls input {
    display: block;
    margin: 0 3px;
}
.search-box .filter-input-controls select {
    width: 150px;
}