JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://elclanrs.github.com/jq-idealforms/css/jquery.idealforms.css">
  <div class="sevencol last">
    <form id="my-form">
      <div><label>名前:</label><input name="username" type="text"/></div>
      <div><label>パスワード:</label><input name="pass" type="password"/></div>
      <div><label>メール:</label><input name="email" type="text"/></div>
      <div><label>誕生日:</label><input name="date" type="text" placeholder="mm/dd/yy"/></div>
      <div>
        <label>言語:</label>
        <label><input type="checkbox" name="langs[]" value="japanese"/>日本語</label>
        <label><input type="checkbox" name="langs[]" value="English"/>英語</label>
        <label><input type="checkbox" name="langs[]" value="Chinese"/>中国語</label>
        <label><input type="checkbox" name="langs[]" value="Spanish"/>スペイン語</label>
        <label><input type="checkbox" name="langs[]" value="French"/>フランス語</label>
        <label><input type="checkbox" name="langs[]" value="German"/>ドイツ語</label>
        <label><input type="checkbox" name="langs[]" value="Korean"/>韓国語</label>
      </div>
      <div><label>ラジオボタン:</label>
        <label><input type="radio" name="radio"/>りんご</label>
        <label><input type="radio" name="radio"/>バナナ</label>
        <label><input type="radio" name="radio"/>ぶどう</label>
      </div>
      <div><label>都道府県:</label>
      <select name="states">
        <option value="選択して下さい">選択して下さい</option> 
        <option value="東京">東京</option> 
        <option value="福岡">福岡</option> 
        <option value="京都">京都</option> 
        <option value="大阪">大阪</option> 
        <option value="福島">福島</option> 
        <option value="広島">広島</option> 
        <option value="北海道">北海道</option> 
        <option value="山形">山形</option> 
        <option value="新潟">新潟</option> 
        <option value="京都">京都</option> 
        <option value="三重">三重</option> 
        <option value="富山">富山</option> 
      </select></div>
      <div><label>コメント:</label><textarea id="comments"...

CSS

body {
   ...

JavaScript

/*--------------------------------------------------------------------------

  jq-idealforms 2.0

  * Author: Cedric Ruiz
  * License: GPLv2
  * Demo: http://elclanrs.github.com/jq-idealforms/

--------------------------------------------------------------------------*/

;(function ($) {

  'use strict';

/*--------------------------------------------------------------------------*/

  /**
   * @namespace A chest for various Utils
   */
  var Utils = {
    /**
     * Get width of widest element in the collection.
     * @memberOf Utils
     * @param {jQuery object} $elms
     * @returns {number}
     */
    getMaxWidth: function ($elms) {
      var maxWidth = 0
      $elms.each(function () {
        if ($(this).outerWidth() > maxWidth) {
          maxWidth = $(this).outerWidth()
        }
      })
      return maxWidth
    },
    /**
     * Hacky way of getting LESS variables
     * @memberOf Utils
     * @param {string} name The name of the LESS class.
     * @param {string} prop The css property where the data is stored.
     * @returns {number, string}
     */
    getLessVar: function (name, prop) {
      var value = $('<p class="' + name + '"></p>').hide().appendTo('body').css(prop)
      $('.' + name).remove()
      return (/^\d+/).test(value) ? parseInt(value, 10) : value
    }
  }

/*--------------------------------------------------------------------------*/

  /**
   * @namespace Contains LESS data
   */
  var LessVars = {
    fieldWidth: Utils.getLessVar('ideal-field-width', 'width')
  }

/*--------------------------------------------------------------------------*/

  /**
   * A custom <select> menu jQuery plugin
   * @example `$('select').toCustomSelect()`
   */
  $.fn.toCustomSelect = function () {

    return this.each(function () {
      var $select = $(this)

      /**
       * Markup and elements of custom select
       * @memberOf $.fn.toCustomSelect
       * @returns {object} All elements of the new select replacement
       */
      var...