JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.red {
  background: #ff1900;;
}

.blue {
  background: #18b0f7;
}

.yellow {
  background: #ffde00;
}
.yellow {
  background: #ffde00;
}
.green{
  background: #73c313;
}

JavaScript

$( ".box" ).on ("mouseover",
  function() {
    var category = $(this).attr("data-catid");
     if (category == 1) 
        //mouse over
        $(this).css('background', "rgb(251,25,0)");
     }).on("mouseout", function() {
        //mouse out
        $(this).css('background', "rgb(241,241,241)");
        }).on("mouseover", function() {
         var category = $(this).attr("data-catid");
   if (category == 2) 
        //mouse over
        $(this).css('background', "rgb(24, 176, 247)");
     }).on("mouseout", function() {
        //mouse out
        $(this).css('background', "rgb(241,241,241)");
   }).on("mouseover", function() {  
  var category = $(this).attr("data-catid");
     if (category == 3) 
        //mouse over
        $(this).css('background', "rgb(255,222,0)");
     }).on("mouseout", function() {
       //mouse out
        $(this).css('background', "rgb(241,241,241)");
        }).on ("mouseover",function() {
    var category = $(this).attr("data-catid");
     if (category == 4) 
        //mouse over
        $(this).css('background', "rgb(115,195,19)");
     }).on("mouseout", function() {
        //mouse out
        $(this).css('background', "rgb(241,241,241)");
    });