JSFiddle - React, Tailwind, and code Playground

by Toby Neilan

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=4</div>

JavaScript

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