JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div>Div</div>
<input type="text" />

CSS

body { margin: 30px; }

JavaScript

$('input').on("keyup", function() {
        
    var self = $(this),
        val = $(this).attr('value'),
        previous = $(this).prev();
    
    if ( !self.hasClass('valEmpty') && val === '' ) {
        
        self.removeClass('valNotEmpty').addClass('valEmpty');
        
        previous.show();
        console.log('Empty');
        
    }
    else if ( !self.hasClass('valNotEmpty') && val !== '' ) {
        
        self.removeClass('valEmpty').addClass('valNotEmpty');
        
        previous.hide();
        console.log('Text');
        
    }
        
});

$('input').on("focusout", function() {
    $(this).removeClass('valEmpty valNotEmpty')
});