JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form1">
     <i>today1</i>
     <input> 
</div>
<div class="form2">
     <i>today2</i>
     <input> 
</div>
<div class="form3">
     <i>today3</i>
     <input> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    var icon1 = $(".form1 i");
    var input1 = $(".form1 input");
    
    var icon2 = $(".form2 i");
    var input2 = $(".form2 input");
    
    var icon3 = $(".form3 i");
    var input3 = $(".form3 input");
    
    //input1
    input1.focusin(function() {
        icon1.addClass("valid");
    });
    input1.focusout(function() {
        icon1.removeClass("valid");
    });
    //input2
    input2.focusin(function() {
        icon2.addClass("valid");
    });
    input2.focusout(function() {
        icon2.removeClass("valid");
    });
    //input3
    input3.focusin(function() {
        icon3.addClass("valid");
    });
    input3.focusout(function() {
        icon3.removeClass("valid");
    });
    
</script>

CSS

.valid {
    background-color: green;
    transition: 1s ease all;
}