JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<!-- container -->
<div id="container" class="clearfix">




<!-- main -->


<!-- sidebar -->
<div id="sidebar">
<form method="get" id="contact-form" action="#">






<fieldset class="section" id="mag">
<legend class="label">メルマガ : </legend>
<div class="right">
<p>当店のメルマガを無料購読されますか？</p>
<label for="yes"><input type="radio" name="malemagezine[]" id="yes" value="yes" checked="checked" />購読する</label>
<label for="no"><input type="radio" name="malemagezine[]" id="no" value="no" />購読しない</label>
</div>
</fieldset>


<fieldset class="section" id="sex">
<legend class="label">性別 : </legend>
    
<label for="yes01"><input type="radio" name="sex[]" id="yes01" value="yes01" checked="checked" />yes</label>
<label for="no01"><input type="radio" name="sex[]" id="no01" value="no01" />no</label>
</fieldset>



<div class="section">
<input type="submit" value="送信" class="button" id="submit-button" />
</div>

</form>
</div><!-- /sidebar -->

</div><!-- /container -->

CSS

div.right{
    margin-left: 135px;
}

#mag .label {
    width: 85px;
    float: left;
    font-weight: bold;
    text-shadow: 0 1px #fff;
    margin-left: 50px;
}


#mag .UIElm-radio-label{
        position: relative;
        padding-left: 30px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: .5em;
        width: 100px;
    }

#mag .radio{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(http://webdesignrecipes.com/MdN-jQuery/ui/images/radio.png) no-repeat 0 0;
    margin-right: 5px;
    position: absolute;
    top:0;
    left: 0;
}

    #mag .radio.checked{
        background-position: 0 100%;
}

#sex .label {
    width: 85px;
    float: left;
    font-weight: bold;
    text-shadow: 0 1px #fff;
    margin-left: 50px;
}

#sex .UIElm-radio-label{
        position: relative;
        padding-left: 30px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: .5em;
        width: 100px;
    }

#sex .rad{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(http://webdesignrecipes.com/MdN-jQuery/ui/images/radio.png) no-repeat 0 0;
    margin-right: 5px;
    position: absolute;
    top:0;
    left: 0;
}

    #sex .rad.checked{
        background-position: 0 100%;
    }

JavaScript

/**
 * UI.Elements
 *
 * @version      0.5
 * @author       nori ([email protected])
 * @copyright    5509 (http://5509.me/)
 * @license      The MIT License
 * @link         https://github.com/5509/ui.elements
 *
 * 2011-12-03 15:27
 */
(function($, window, document, undefined) {

    var UIElements = function($elm, options) {
        var self = this;

        if ( !(this instanceof UIElements) ) {
            return new UIElements($elm, options);
        }

        // this is also prefix
        self.$elm = $elm;
        self._init(options);
    };

    UIElements.prototype = {
        _init: function(options) {
            var self = this;
            $.each(options, function(val) {
                if ( !this.length ) return;
                $.each(this, function() {
                    self._create(val, this.name);
                });
            });
        },

        _create: function(type, name) {
            var self = this,
                _$elms = undefined;
            type = '_' + type;

            if ( type === '_tab' ) {
                self[type].$elms = self.$elm.find('.' + name);
            } else {
                self[type].$elms = self.$elm.find('[name="' + name + '"]');
            }
            _$elms = self[type].$elms;

            self[type].create(_$elms);
        },
        _checkbox: {
            name: 'checkbox',
            state: false,
            sets: [],
            create: function($elms) {
                var self = this;
                $elms.each(function(i) {
                    var $this = $(this),
                        $UIElm = $('<span class="' + self.name + '"></span>'),
                        $label = $('label[for=' + this.id + ']'),
                        disabled = $this.prop('disabled');

                    self.sets.push({
                        $orig: $this,
                        $UIElm: $UIElm,
                        state: this.checked,
                        id: i
                    });

      ...