JSFiddle - React, Tailwind, and code Playground

by nel_mo

HTML

<div class="container">
   <input class="myAwesomeInputBox" id='myAwesomeId' type="text">
       <input type='button' id='button1' value='style 1'>
       <input type='button' id='button2' value='style 2'>
</div>

CSS

input.focused {
    border:3px solid blue;
}
.style1{
    border:3px solid red;
}
.style2{
    border:3px solid yellow;
}

JavaScript

$('#myAwesomeId').on({
    focus: function () {
        $(this).addClass('focused');
    },

    blur: function () {
        $(this).removeClass('focused');
    }
});

$('#button1').click(function(){
    $("#myAwesomeId").removeClass();
    $('#myAwesomeId').addClass('style1');
});
$('#button2').click(function(){
    $("#myAwesomeId").removeClass();
    $('#myAwesomeId').addClass('style2');
});