JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<div>
    
    <input type='test' class='error' value='hellobeneverard.com' />
    <label>Not a valid email</label>
    
</div>

CSS

div {
    
    border: 1px solid red;
    width: 400px;
    height: 100px;
    padding: 20px;
}

label {
    border: 2px solid red;
    padding: 2px 4px;
    border-radius: 5px;
    opacity: 0;   
    margin-left: 20px;
    -webkit-transition: all .4s ease-in-out;
}

label.show {
    opacity: 1;   
    margin-left: 0;
}

JavaScript

$(document).ready(function() {
   
    $('input.error').focus(function() {
        $('label').addClass('show');
    });
    
    $('input.error').blur(function() {
        $('label').removeClass('show');
    });
    
});