JSFiddle - React, Tailwind, and code Playground

by rudigerkidd

HTML

<button  class="buttons">button 1</button>
<button  class="buttons">button 1</button>
<button  class="buttons">button 1</button>

CSS

.buttons {
    background-color: red;
}

JavaScript

$('.buttons').mouseenter(function() {
    $(this).css("background-color", "blue");
});
$('.buttons').mouseleave(function() {
    if ($(this).attr("id") == "clicked" ) {
        $(this).css("background-color", "yellow");
    } else {
       $(this).css("background-color", "red"); 
    }
});

$(".buttons").click(function() {
    $(".buttons").css("background-color", "red");
    $(".buttons").attr("id","");
    $(this).css("background-color", "yellow");
    $(this).attr("id","clicked");
});