JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<ul class="form">
    <li class="field">
        <label class="field-label">Texbox</label>
        <div class="field-control">
            <input class="textbox" type="text" />
            <span class="field-description"></span>
            <span class="field-validation-error"></span>
        </div>
    </li>
    <li class="field">
        <label class="field-label">Checkbox</label>
        <div class="field-control">
            <input class="checkbox" type="checkbox" />
            <span class="field-description"></span>
            <span class="field-validation-error"></span>
        </div>
    </li>
    <li class="field">
        <label class="field-label">Checkbox List</label>
        <div class="field-control">
            <span class="field-component checkradiolist">
                <label><input class="checkbox" type="checkbox" /> <span>checkboxlist</span></label>
                <label><input class="checkbox" type="checkbox" /> <span>checkboxlist</span></label>
                <label><input class="checkbox" type="checkbox" /> <span>checkboxlist</span></label>
            </span>
            <span class="field-description"></span>
            <span class="field-validation-error"></span>
        </div>
    </li>
    <li class="field">
        <label class="field-label">Radio List</label>
        <div class="field-control">
            <span class="field-component checkradiolist">
                <label><input class="radio" type="radio" /> <span>radiolist</span></label>
                <label><input class="radio" type="radio" /> <span>radiolist</span></label>
                <label><input class="radio" type="radio" /> <span>radiolist</span></label>
            </span>
            <span class="field-description"></span>
            <span class="field-validation-error"></span>
        </div>
    </li>
    <li class="field">
        <label class="field-label">Name</label>
        <div class="field-control">
            <span class="field-component...

CSS

.field-component  {}

.fc-checkboxlist  {}
.fc-radiolist     {}
.fc-textboxlist   {}

.fc-address       {}
.fc-name          {}

.form                   {}
.field                  {}
.field-label            {}
.field-control          {}
.field-component        {}
.field-description      {}
.field-validation-error {}


.field-component            {}

.field-component-vertical > span,
.field-component-vertical > label { display:block;}

/*
.textboxlist-address       { overflow:hidden;}
.textboxlist-address input { display:block;}
.textboxlist-address span:nth-child(n+3) { float:left; width:40%;}
.textboxlist-address span:nth-child(n+1) input { clear:both; width:67%;}
*/

JavaScript

/*

section
block

form
field
	field-label
	field-control
    field-component-row
    field-component
	--
		textbox
		select
		file
		textarea
		checkbox
		radio
		checkradiolist
		textboxlist
	--
	field-description
	field-validation
*/