JSFiddle - React, Tailwind, and code Playground

by mccannf

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="https://github.com/harvesthq/chosen/raw/master/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.css">
<script src="https://github.com/pixelmatrix/uniform/raw/master/jquery.uniform.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h3>New Member Form</h3>
        </div>
        <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div>
          <div class="modal-body">
            <div class="widget-content nopadding">
              <div class="control-group">
                <label class="control-label" for="user_role">Role</label>
                <div class="controls">
                  <select id="user_role" name="user[role]" class="chzn-done"><option value="">Select member role</option>
                  <option value="1">Player</option>
                  <option value="2">Coach</option>
                  <option value="3">Parent</option>
                  <option value="4">Manager</option>
                  <option value="5">Non-player</option></select>
                </div>
              </div>
              <div class="control-group">
                <label...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

.container {
    margin-top: 10px;
}

.dropdown-menu {
    top: 0;
}

/* Copied from https://github.com/pixelmatrix/uniform/blob/master/themes/aristo/uniform.aristo.css */

div.selector, 
div.selector span,
div.checker span,
div.radio span,
div.uploader,
div.uploader span.action {
  background-image: url('https://github.com/pixelmatrix/uniform/raw/master/themes/aristo/images/sprite-aristo.png');
  background-repeat: no-repeat;
}

.selector, 
.radio, 
.checker, 
.uploader, 
.selector *, 
.radio *, 
.checker *, 
.uploader *{
    margin: 0;
    padding: 0;
}

/* SPRITES */

/* Select */

div.selector {
  background-position: -483px -160px;
  line-height: 32px;
    height: 32px;
}

div.selector span {
  background-position: right 0px;
  height: 32px;
    line-height: 32px;
}

div.selector select {
  /* change these to adjust positioning of select element */
  top: 0px;
    left: 0px;
}

div.selector:active, 
div.selector.active {
    background-position: -483px -192px;
}

div.selector:active span, 
div.selector.active span {
    background-position: right -32px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
    background-position: -483px -224px;
}

div.selector.focus span, div.selector.hover span, div.selector:hover span {
    background-position: right -64px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
    background-position: -483px -256px;
}

div.selector.focus:active span,
div.selector:hover:active span,
div.selector.active:hover span,
div.selector.focus.active span {
    background-position: right -96px;
}

div.selector.disabled,
div.selector.disabled:active,
div.selector.disabled.active {
    background-position: -483px -288px;
}

div.selector.disabled span,
div.selector.disabled:active...

JavaScript

$(document).ready(function() {
   
    $( "#user_dob" ).datepicker();

    $(".chzn-done").chosen();
    
    $(':checkbox').uniform();
    
    $('form').validate();
    
});