JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<span class="uiComponent uiCheckList"><ul class="uiCheckListColumns"><li><div class="uiCheckListItem"><span><input 
    
    type="checkbox" value="true" id="Model_Seinfeld_0__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_0__IsSelected">Jerry</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" 
    
    value="true" id="Model_Seinfeld_1__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_1__IsSelected">Elaine</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" 
    
    value="true" id="Model_Seinfeld_2__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_2__IsSelected">Kramer</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" 
    
    value="true" id="Model_Seinfeld_3__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_3__IsSelected">George</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" 
    
    value="true" id="Model_Seinfeld_4__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_4__IsSelected">Newman</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" 
    
    value="true" id="Model_Seinfeld_5__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_5__IsSelected">Putty</label></span></div></li><li><div class="uiCheckListItem"><span><input 
    
    type="checkbox" value="true" id="Model_Seinfeld_6__IsSelected"></span><span><label for="Model_Seinfeld_6__IsSelected">Tim 
    
    DDS</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" value="true" 
    
    id="Model_Seinfeld_7__IsSelected"></span><span><label for="Model_Seinfeld_7__IsSelected">Kenny</label></span></div><div 
    
    class="uiCheckListItem"><span><input type="checkbox" value="true" id="Model_Seinfeld_8__IsSelected"></span><span><label 
    
    for="Model_Seinfeld_8__IsSelected">Jerry</label></span></div><div class="uiCheckListItem"><span><input type="checkbox" 
    
 ...

CSS

.uiCheckList  {    display: inline-block; }   .uiCheckListColumns {     list-style-type: none;      margin: 0;      padding: 0; }   .uiCheckListColumns li {     line-height: 1;     display: inline-block;     margin-right: 5px;           /* IE 7- fixes */     zoom: 1;     *display: inline; }