JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>

CSS

.grid{
    width : 100px;
    height: 100px;
    background-color: red;
    display:inline-block;
}

.blackbg{
    background-color: #000;
}

JavaScript

$(function() {
    var counter = $('.grid').length;
    
    $('.grid').hover(function(){
         $(this).addClass("blackbg").delay(2000).queue(function(){
            $(this).removeClass("blackbg").dequeue();
        });
    var bgcounter = $('.blackbg').length;
    if(bgcounter == counter)
    {
        alert("you Win");
    }
    });
    
});