JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div class='ppp'>
<div>
    <input type='text'>
    <span></span>
</div>

<div>
    <input type='text'>
    <span></span>
</div>

<div>
    <input type='text'>
    <span></span>
</div>
</div>

CSS

div {
    margin: 20px;
    padding: 10px;
    outline: 0;
}

.ppp {
    background: #eee;
}

JavaScript

$(function() {
    $('div input').parent().attr("tabindex",-1).focus( function() {
        $(this).css('background','#ddd');
        $(this).find('span').text(' triggered');
        
        $(this).focusout(function() {
            $(this).children('span').empty();
            $(this).css('background','#eee');
            
        });            
        
   });
   
   $('div input').focus( function() {
        $(this).parent().css('background','#ddd');
        $(this).siblings('span').text(' triggered');
    
        $(this).parent().focusout(function() {
            $(this).children('span').empty();
            $(this).css('background','#eee');
        });            
   });
});