JSFiddle - React, Tailwind, and code Playground
HTML
<h4>What state access would look like:</h4>
<div class="caption">State sees all regions, choose plans and permissions</div>
<form>
<div class="widget">
<label>Region:</label>
<br />
<select>
<option>All Regions</option>
<option>Region 1</option>
<option>Region 2</option>
<option>Region 3</option>
<option>Region 4</option>
<option>Region 5</option>
<option>Region 9 (fake)</option>
</select>
</div>
<div class="widget">
<label>District:</label>
<br />
<select>
<option>All Districts</option>
<option>Alachua</option>
<option>Baker</option>
<option>Bay</option>
</select>
</div>
<div class="widget">
<label>School:</label>
<br />
<select>
<option>All Schools</option>
<option>Some Elementary</option>
<option>Some Middle</option>
<option>Some High School</option>
</select>
</div>
<div class="widget">
<label>Plan:</label>
<br />
<select>
<option>All Plans</option>
<option>SIP</option>
<option>DIAP</option>
<option>SIG</option>
</select>
</div>
<div class="widget checkbox">
<label>Create:</label>
<br />
<input type="checkbox" />
</div>
<div class="widget checkbox">
<label>Edit:</label>
<br />
<input type="checkbox" />
</div>
<div class="widget checkbox">
<label>View</label>
<br />
<input type="checkbox" />
</div>
<div class="widget checkbox">
<label>Submit:</label>
<br />
<input type="checkbox" />
</div>
<div class="widget checkbox">
<label>Track:</label>
<br />
<input type="checkbox" />
</div>
<div class="widget checkbox">
...
CSS
h4 {
color: blue;
margin-bottom: 3px;
}
.caption {
font-family: sans-serif;
font-size: 8pt;
margin-bottom: 3px;
}
.clear {
clear: both;
}
form {
border: 1px solid black;
padding: 5px;
margin-bottom: 15px;
}
.widget {
float: left;
margin-right: 5px;
}
label {
font-family: sans-serif;
font-size: 10pt;
font-weight: bold;
}
.checkbox {
text-align: center;
width: 55px;
}
.disabled {
background-color: #ddd;
}
.hidden * {
visibility: hidden;
}