JSFiddle - React, Tailwind, and code Playground
by cmruser
HTML
<ul class="form">
<li class="field">
<label class="label">Textbox</label>
<input class="textbox" type="text" />
<small class="field-description">this is description</small>
<span class="field-validation-error"></span>
</li>
<li class="field">
<label class="label">Select</label>
<select class="select">
<option>Select</option>
</select>
</li>
<li class="field">
<label class="label">Textarea</label>
<textarea class="textarea"></textarea>
</li>
<li class="field">
<label class="label">File Upload</label>
<input class="file" type="file" />
</li>
<li class="field">
<label class="label">Checkbox List</label>
<div class="checkboxlist">
<label><input type="checkbox" /> checkbox</label>
<label><input type="checkbox" /> checkbox</label>
<label><input type="checkbox" /> checkbox</label>
<label><input type="checkbox" /> checkbox</label>
</div>
</li>
<li class="field">
<label class="label">Radio List</label>
<div class="radiolist">
<label><input type="radio" /> radio</label>
<label><input type="radio" /> radio</label>
<label><input type="radio" /> radio</label>
<label><input type="radio" /> radio</label>
</div>
</li>
<li class="field">
<label class="label">Textbox List</label>
<div class="textboxlist">
<label><input class="" type="text" /> textbox</label>
<label><input class="" type="text" /> textbox</label>
<label><input class="" type="text" /> textbox</label>
<label><input class="" type="text" /> textbox</label>
</div>
</li>
<li class="field">
<label class="checkbox"><input type="checkbox" /> checkbox</label>
</li>
<li class="field">
<label class="radio"><input type="radio" /> radio</label>
</li>
<li class="field">
<label class="label">Compound Box</label>
<div class="compoundbox">
<span class="checkboxlist">
<label><input type="checkbox" /> checkbox</label>
<label><input type="checkbox" /> checkbox</label>
<label><input type="checkbox" />...