JSFiddle - React, Tailwind, and code Playground

by dafastestfingers

HTML

<form id="foo">
  <ul>
    <li><input type="text" /></li>
    <li><input type="password" /></li>
  </ul>
</form>

CSS

ul {
 style-type: none;   
}

input {
 margin: 5px 5px 5px 5px;
}

.blue-border {
 border: solid 1px blue;    
}

.orange-border {
 border: solid 3px orange;    
}

JavaScript

var controls = $('input');
var form = $('#foo');

controls.focus(function() {
    $(this)
        .css('background','red')
        .addClass('orange-border');
    form
        .css('background', 'green')
        .addClass('blue-border');
}).focusout(function () {
    $(this)
        .css('background','white')
        .removeClass('orange-border');
}).blur(function() {
    form
       .css('background', 'none')
       .removeClass('blue-border');
});