JSFiddle - React, Tailwind, and code Playground

by clarusdignus

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script>
<!--Mark-up cannot be edited for the purposes of the required solution.-->
<p>
  <label for="user_login">
    Username
    <br>
    <input type="text" size="20" value="" class="input" id="user_login" name="log">
  </label>
</p>
<p>
  <label for="user_pass">
    Password
    <br>
    <input type="password" size="20" value="" class="input" id="user_pass" name="pwd">
  </label>
</p>
<p class="forgetmenot">
  <label for="rememberme">
    <input type="checkbox" value="forever" id="rememberme" name="rememberme"> Remember Me
  </label>
</p>

CSS

input[type="text"],
input[type="password"] {
  border: 1px solid black;
  padding: 5px;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid red;
}

label {
  cursor: pointer;
}

JavaScript

$(document).ready(function() {

  //Wrap a span around the text node following the checkbox for styling convenience.
  $('#rememberme').each(function() {
    $(this.nextSibling).wrap('<span></span>');
  });

  //Initiate iCheck for checkboxes.
  $('input').iCheck({
    handle: 'checkbox',
    checkboxClass: 'icheckbox_minimal'
  });

});