JSFiddle - React, Tailwind, and code Playground

by jecker

HTML

<fieldset>
 <legend>Automobiles:</legend>
 <div class="tierGrp gm">
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="2" checked >Spark</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="8" checked >Sonic</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="32" checked >Cruze</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="10" checked >Malibu</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="17" checked >Impala</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="21" checked >SS Sedan</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="13" checked >Camero</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="29" checked >Corvette</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="9" checked >Motorsports</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="30" checked >Trax</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="25" checked >Equinox</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="27" checked >Traverse</label>
 <label class="cars chevrolet" style="display:block"><input type="checkbox" value="28" checked >Tahoe</label>
 </div>
 </fieldset>

CSS

.tierGrp {
 align:center;
 text-align:center;
 font-size:26px;
 background-color:#EEE;
 width:625px;
 height:auto;
 display:block;
 margin-bottom: 5px;
 margin-left: auto;
 margin-right: auto;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -khtml-border-radius: 8px;
 border-radius: 8px;
 padding-top: 3px;
 padding-bottom: 3px;
 }
 .gm {
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
 -webkit-column-fill: balance;
 -moz-column-fill: balance;
 column-fill: balance;
 -webkit-column-gap: 5px;
 -moz-column-gap: 5px;
 column-gap: 5px;
 text-align:left;
 }
 .cars {
    font-size: 18px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:300;
	border:1px solid #3498DB;
	border-radius:5px;
	background:#EDF5FA 50% 50%;
	height:auto;
	min-width:100px !important;
	padding-left:5px;
	padding-right:5px;
	cursor: pointer;
}