JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<div id="wrapper">
    <h1>
        Example of all form elements
    </h1>
    <form action="" enctype="multipart/form-data" onsubmit="return false;">
        <p>
            <input id="test_checkbox_1" name="test_checkbox_1" type="checkbox">
            <label for="test_checkbox_1">
                Test checkbox 1
            </label>
            &nbsp;
            &nbsp;
            <input id="test_checkbox_2" name="test_checkbox_2" type="checkbox">
            <label for="test_checkbox_2">
                Test checkbox 2
            </label>
            &nbsp;
            &nbsp;
            <input id="test_checkbox_3" name="test_checkbox_3" type="checkbox">
            <label for="test_checkbox_3">
                Test checkbox 3
            </label>
        </p>
        <p>
            <input id="test_radio_1" name="test_radio_group" type="radio">
            <label for="test_radio_1">
                Test radio 1
            </label>
            &nbsp;
            &nbsp;
            <input id="test_radio_2" name="test_radio_group" type="radio">
            <label for="test_radio_2">
                Test radio 2
            </label>
            &nbsp;
            &nbsp;
            <input id="test_radio_3" name="test_radio_group" type="radio">
            <label for="test_radio_3">
                Test radio 3
            </label>
        </p>
        <p>
            <label for="select_dd">
                Select drop-down
            </label>
            <br>
            <select id="select_dd" name="select_dd">
                <optgroup label="Group 1">
                    <option value="1">Some text goes here</option>
                    <option value="2">Another choice could be here</option>
                    <option value="3">Yet another item to be chosen</option>
                </optgroup>
                <optgroup label="Group 2">
                    <option value="4">Some text goes here</option>
                    <option value="5">Another choice...

JavaScript

//
// Note: This file depends on the jQuery library.
//

// Automatically calls all functions in FORMALIZE.init
jQuery(document).ready(function() {
    FORMALIZE.go();
});

// Module pattern:
// http://yuiblog.com/blog/2007/06/12/module-pattern/
var FORMALIZE = (function($, window, document, undefined) {
    // Private constants.
    var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input');
    var AUTOFOCUS_SUPPORTED = 'autofocus' in document.createElement('input');
    var WEBKIT = 'webkitAppearance' in document.createElement('select').style;
    var IE6 = !!($.browser.msie && parseInt($.browser.version, 10) === 6);
    var IE7 = !!($.browser.msie && parseInt($.browser.version, 10) === 7);

    // Expose innards of FORMALIZE.
    return {
        // FORMALIZE.go
        go: function() {
            for (var i in FORMALIZE.init) {
                FORMALIZE.init[i]();
            }
        },
        // FORMALIZE.init
        init: {
            detect_webkit: function() {            
                if (!WEBKIT) {
                    return;
                }

                // Tweaks for Safari + Chrome.
                $('html').addClass('is_webkit');
            },
            // FORMALIZE.init.full_input_size
            full_input_size: function() {
                if (!IE7 || !$('textarea, input.input_full').length) {
                    return;
                }

                // This fixes width: 100% on <textarea> and class="input_full".
                // It ensures that form elements don't go wider than container.
                $('textarea, input.input_full').wrap('<span class="input_full_wrap"></span>');
            },
            // FORMALIZE.init.ie6_skin_inputs
            ie6_skin_inputs: function() {
                // Test for Internet Explorer 6.
                if (!IE6 || !$('input, select, textarea').length) {
                    // Exit if the browser is not IE6,
                    // or if no form elements...