JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<body>
  <table>
    <tr>
      <td><div class="box"></div></td>
      <td><div class="box"></div></td>
      <td><div class="box"></div></td>
    </tr>
    <tr>
      <td><div class="box"></div></td>
      <td></td>
      <td><div class="box"></div></td>
    </tr>
    <tr>
      <td><div class="box"></div></td>
      <td><div class="box"></div></td>
      <td><div class="box"></div></td>
    </tr>
  </table>
  <div class="green"></div>
</body>

CSS

.box{
    height:100px;
    width:100px;
    border:1px solid #000;
    margin:10px;
}

.blue{
    background:#6A5ACD;
}

.red{
    background:#f00!important;
}

.green{
    height:24px;
    width:24px;
    background:#0f0;
    position:absolute;
    top:185px;
    left:185px;
}

JavaScript

$(document).ready(function(){ 
  $('.box').click( function() {    
    $(this).addClass("blue");
    var n = $("div.box.blue").length;  
    // check if all boxes are in slateblue
	if (n > 7) 
       // 1 sec after the last one clicked, make all box red
       setTimeout(function() {
         $("div.box.blue").css("background", "red"); 
       }, 1000);		 
  } );
} );