JSFiddle - React, Tailwind, and code Playground

by Chazlol

HTML

<div class="rs_card"><span style="font-size: 1em;">How to create website like programmer?</span><div class="col-3" style="margin-top: 5%"><input type="text" placeholder="Placeholder Text" class="input_field required"><span class="focus-border"></span></div></div>

<div class="rs_card"><span style="font-size: 1em;">How to create art like painter?</span><div class="col-3" style="margin-top: 5%"><input type="text" placeholder="Placeholder Text" class="input_field required"><span class="focus-border"></span></div></div>

<div class="rs_card"><span style="font-size: 1em;">How to create transition effect like materialize css</span><div class="col-3" style="margin-top: 5%"><input type="text" placeholder="Placeholder Text" class="input_field required"><span class="focus-border"></span></div></div>

JavaScript

$(document).ready(function(){    
    $('input.required').each(function(){
        $(this).on('keyup', function(){
            if($(this).val() == '123'){
            		console.log("if");
                $(this).parents('div.rs_card').addClass('invalid_card');
            } else{
                console.log("else");
                $(this).parents('div.rs_card').removeClass('invalid_card');
            }
        });
    });
});