JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<form action="#" id="test" method="post">
    <div>
        <label for="name">Nome</label>
        <input type="text" name="name" id="name" />
    </div>
    <div>
        <label for="email">E-mail</label>
        <input type="text" name="email" id="email" />
    </div>
</form>

CSS

form {
    margin: 2em;
}

form div {
    margin-bottom: 1em;
    overflow: hidden;
}

label {
    float: left;
    width: 4em;
    font: bold 90% Arial, sans-serif;
    margin-right: 1em;
    padding: 0.3em;
    text-align: center;
}

input {
    font: 1em Arial, sans-serif;
    width: 12em;
    border: 1px solid #999;
    padding: 3px;
    float: left;
}
.labelfocus {
    background: #ffa;
    border-radius: 6px;
    border: 1px solid #f60;
}

JavaScript

$(function() {
    $('form :input').focus(function() {
      $("label[for='" + this.id + "']").addClass('labelfocus', 500);
    }).blur(function() {
      $('label').removeClass('labelfocus', 500);
    });
});