JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<link rel="stylesheet" href="http://arthurgouveia.com/prettyCheckable/js/prettyCheckable/prettyCheckable.css">
<script src="http://arthurgouveia.com/prettyCheckable/js/prettyCheckable/prettyCheckable.js"></script>
<div class="input-wrapper">
              <input type="checkbox" class="prettyCheckable" value="1" id="Test1" name="Test1" data-label="Right positioned label (no param)" />
            </div>

            <div class="input-wrapper">
              <input type="checkbox" class="prettyCheckable" value="2" id="Test2" name="Test2" data-label='data-labelPosition="left"' data-labelPosition="left" />
            </div>

            <div class="input-wrapper">
              <label>Radios!</label>
              <input type="radio" class="prettyCheckable" value="1" id="Test3_0" name="Test3" data-label="Yes" checked data-customclass="margin-right"/>
              <input type="radio" class="prettyCheckable" value="2" id="Test3_1" name="Test3" data-label="No" />
            </div>

            <div class="input-wrapper">
                                    <br/>
              <div class="input-wrapper">
                  <input type="checkbox" class="prettyCheckable" value="1" id="color1" checked name="color1" data-label="Default (no-param)" />
                </div>

                <div class="input-wrapper">
                  <input type="checkbox" class="prettyCheckable" value="1" id="color2" checked name="color2" data-label='data-color="green"' data-color="green" />
                </div>

                <div class="input-wrapper">
                  <input type="checkbox" class="prettyCheckable" value="1" id="color3" checked name="color3" data-label='data-color="red"' data-color="red" />
                </div>

                <div class="input-wrapper">
                  <input type="checkbox" class="prettyCheckable" value="1" id="color4" checked name="color4" data-label='data-color="yellow"' data-color="yellow" />
                </div>
            </div>

CSS

body
{
    padding: 10pt;
    font-size: 12pt;
    font-family: calibri;
}

JavaScript

$(document).ready(function() {
   $('input.prettyCheckable').prettyCheckable();
});