JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<h1>form build</h1>
<section>
    
</section>
<ul class="form">
    <li>
        <label>text field</label>        
        <div>
            <input type="text" />
            <small></small>
        </div>
        <span>
            <a href="#">edit</a>
            <a href="#">remove</a>
        </span>
    </li>
    <li>
        <label>select field</label>
        <div>
            <select>
                <option>Please Select</option>
            </select>
            <small>this is emphasis</small>
        </div>
        <span>
            <a href="#">edit</a>
            <a href="#">remove</a>
        </span>
    </li>
    <li>
        <label>textarea</label>        
        <div>
            <textarea></textarea>
            <small>this is emphasis</small>
        </div>
        <span>
            <a href="#">edit</a>
            <a href="#">remove</a>
        </span>
    </li>    
    <li>
        <label>checkbox list</label>
        <div>
            <label><input type="checkbox" /> checkbox</label>
            <label><input type="checkbox" /> checkbox</label>
        </div>
        <span>
            <a href="#">edit</a>
            <a href="#">remove</a>
        </span>
    </li>
    <li>
        <label>textbox list</label>
        <div>
            <label><input type="text" /> text</label>
            <label><input type="text" /> text</label>
        </div>
        <span>
            <a href="#">edit</a>
            <a href="#">remove</a>
        </span>
    </li>
</ul>


<h1>form</h1>
<ul class="form">
    <li class="error">
        <label>text field</label>
        <input type="text" />
        <span>This is error</span>
    </li>
    <li>
        <label>select field</label>
        <select>
            <option>Please Select</option>
        </select>
        <small>this is emphasis</small>
    </li>
    <li>
        <label>textarea</label>        
        <textarea></textarea>
        <small>this is emphasis</small>
    </li>    
    <li...

CSS

*,
*:before,
*:after {
  
}

.error input,
.error div {
    border:1px solid red;
}

.form { list-style:none; margin:0; padding:0;}
.form li { border:1px solid #ccc;}
.form li > label { display:block;}
.form li > div   {}
.form li  small { display:block;}
.form li > span  { color:red;}

.form-col-2 {}
.form-horizontal {}
.form-label-right {}

/*
span {display:inline-block; vertical-align:middle;}
input[type="checkbox"] { float:left; margin:4px 0 0;}
*/

JavaScript

var label = $(document.createElement('label'));
var input = $(document.createElement('input'));
label.text('text').prepend(input);

//$('body').append(label);
$('.form').addClass('form-2-cols');