JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="container">
    <div class="cell" id="1"></div>
    <div class="cell" id="2"></div>
    <div class="cell" id="3"></div>
    <div class="cell" id="4"></div>
    <div class="cell" id="5"></div>
    <div class="cell" id="6"></div>
    <div class="cell" id="7"></div>
    <div class="cell" id="8"></div>
    <div class="cell" id="9"></div>
    <div class="cell" id="10"></div>
    <div class="cell" id="11"></div>
    <div class="cell" id="12"></div>
    <div class="cell" id="13"></div>
    <div class="cell" id="14"></div>
    <div class="cell" id="15"></div>
    <div class="cell" id="16"></div>
</div>

CSS

#container {
    width: 600px;
    height: 280px;
    background-color: #000000;
    'padding-bottom: 1%;
     
}
.cell {
    background-color: #2e2e2e;
    height: 22.7%;
    width: 24%;
    margin: 0.5%;
    float: left;
    
    
}

JavaScript

$('#6').fadeOut().css({'background-color' : '#FFFFFF' }).fadeIn();
setTimeout(function(){
    $('#11').css({'background-color': '#008000'}).siblings().css({'background-color': '#2e2e2e'});
}, 500);
setTimeout(function(){
    $('#9').css({'background-color': '#0000CD'}).siblings().css({'background-color': '#2e2e2e'});
}, 1000);
setTimeout(function(){
    $('#4').css({'background-color' : '#FFFFFF' }).siblings().css({'background-color' : '#2e2e2e'});}, 1500);
setTimeout(function(){
    $('#14').css({'background-color' : '#FF8C00'}).siblings().css({'background-color' : '#2e2e2e'});}, 2000);