JSFiddle - React, Tailwind, and code Playground

by needlethread

HTML

<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <label for="star">Use name:</label>
    <input type="checkbox" name="star" id="star" class="ui-btn-inline" />
   
    <input type="text" name="yourname" id="yourname" placeholder="your name ..." value="" data-wrapper-class="controlgroup-textinput ui-btn bc_field_wide" />
</div>
<input type="checkbox" name="normal" id="normal" data-mini="true" class="ui-btn-inline" />
<label for="normal">Normal</label>
<label>
    Discount:<input type="text" name="discount" id="discount" value="" data-role='none'/> %
</label>

CSS

div.controlgroup-textinput {
    padding-top: .12em;
    padding-bottom: .12em;
    padding-left: 0px;
    padding-right: 0px;
}
div.ui-controlgroup-controls label[for].ui-btn::after {
    content:" ";
    display:inline-block;
    width:14px;
    height:14px;
}
div.ui-controlgroup-controls label[for].ui-btn.ui-checkbox-on {
    background-color: #f6f6f6;
    border-color: #DDDDDD;
}