JSFiddle - React, Tailwind, and code Playground

by Toby Neilan

HTML

<div class="box"data-catid="2">data-catid=2</div>
 <div class="box1"data-catid="3">data-catid=3</div>

CSS

.body[data-catid="2"] {
   background: #f1f1f1;
}
.body[data-catid="3"] {
   background: #f1f1f1;
}

JavaScript

$(document).ready(function() {
    var colorOrig=$(".box").css('background');
    $(".box").hover(
    function() {
        //mouse over
        $(this).css('background', '#ff1900')
    }, function() {
        //mouse out
        $(this).css('background', '#f1f1f1')
    });
    
    $(".box1").hover(
    function() {
        //mouse over
        $(this).css('background', '#0280f8')
    }, function() {
        //mouse out
        $(this).css('background', '#f1f1f1')
    });
});