JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<form accept-charset="utf-8" method="get" action="#">
      <fieldset class="checkboxes">
        <label for="checkbox-01" class="label_check">
                    <input type="checkbox" checked="" value="1" id="checkbox-01" name="sample-checkbox-01" /> Checkbox1
                </label>
        <label for="checkbox-02" class="label_check">
                    <input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> Checkbox2</label>
      </fieldset>
      <fieldset class="radios">
        <label for="radio-01" class="label_radio">
                    <input type="radio" checked="" value="1" id="radio-01" name="sample-radio" />Radio1
                </label>
        <label for="radio-02" class="label_radio">
                    <input type="radio" value="1" id="radio-02" name="sample-radio" />Radio2
                </label>
        <label for="radio-03" class="label_radio">
                    <input type="radio" value="1" id="radio-03" name="sample-radio" /> Radio3
                </label>
      </fieldset>
    </form>

<script type="text/javascript">
        var d = document;
        var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
        
        var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
        onload = function() {
            var body = gebtn(d,'body')[0];
            body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
            if (!d.getElementById || !d.createTextNode) {
                return;
            }
            var ls = gebtn(d,'label');
            for (var i = 0; i < ls.length; i++) {
                var l = ls[i];
                if (l.className.indexOf('label_') == -1) {
                    continue;
                }
                var inp = gebtn(l,'input')[0];
                if (l.className == 'label_check') {
                    //l.className = (safari && inp.checked == true ||...

CSS

* { margin: 0; padding: 0; }
        body { 
            font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; 
            color: #fff; 
            background: #333; 
        }
        a:hover, 
        a:active { 
            outline: none; 
        }
        /*form style*/
        form { 
            width: 300px; 
            padding: 18px 20px 0; 
            margin:20px auto;
            background-color: #0064cd;
            background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
            background-image: -moz-linear-gradient(#049cdb, #0064cd);
            background-image: -ms-linear-gradient(#049cdb, #0064cd);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
            background-image: -webkit-linear-gradient(#049cdb, #0064cd);
            background-image: -o-linear-gradient(#049cdb, #0064cd);
            background-image: linear-gradient(#049cdb, #0064cd);    
            -webkit-border-radius: 10px; 
            -moz-border-radius: 10px; 
            -khtml-border-radius: 10px; 
            border-radius: 10px;            
            -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            box-shadow: 0 5px 12px rgba(0,0,0,.4); 
        }
        fieldset { 
            border: 0; 
            padding-bottom: 9px;
        }
        label { 
            display: block; 
            cursor: pointer; 
            line-height: 20px; 
            padding-bottom: 9px; 
            text-shadow: 0 -1px 0 rgba(0,0,0,.2); 
        }
        .checkboxes {
            border-bottom: 1px solid #0064cd;
        }
        .radios { 
            padding-top: 18px;
            border-top: 1px solid #049CDB;
        }
        .label_check input,
        .label_radio input { 
           ...