JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<div>
<div>
<div class="block" style="display:inline-block"></div>
<div class="block" style="display:inline-block"></div>      
<div class="block" style="display:inline-block"></div> 
</div>
<div>
 <div class="block" style="display:inline-block"></div>
 <div id="block22" class="block"style="display:inline-block"></div>       
 <div class="block" style="display:inline-block"></div> 
</div>
<div>
<div class="block" style="display:inline-block"></div>
<div class="block" style="display:inline-block"></div>       
<div class="block" style="display:inline-block"></div> 
</div>
</div>

CSS

.block{
    height:100px;
    width:100px;
    border:1px solid #929292;
}
.block:hover{
    cursor:hand;
    cursor:pointer;
    background-color:yellow;
}
.whiteBg{
    background-color:white;
}
.greenBg{
    background-color:green;
}
#block22{
    background-color:green;
}

JavaScript

$('.block').toggle(function() {  
    changeWhite();
   $(this).css("background-color","green");
},
function() {
    $(this).css("background-color","white");
});

function changeWhite(){
$(".block").css("background-color","white");
    $(".block:hover").css("background-color","yellow");
    
}