JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div id="shuffle">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
   ...

CSS

#shuffle > div {
    float: left;
    line-height: 30px;
    width: 30px;
    height: 30px;
    background-color:SpringGreen ;
    border-radius: 4px;
    margin: 3px;
}

#shuffle {
    background-color:HoneyDew;
    max-width: 360px;line-height:30px
    height:360px;
    float:left;
    padding:5px;
    max-width: 360px;
}

.highlight {
 opacity:0.7;
 filter:alpha(opacity=5);
 background-color:#7FFF00;
}

body {
    background-color:LightCoral;
}

JavaScript

$(document).ready( function() {
var $divs = $('.cell').removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
$('.cell').click(function(e)
{
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}  
var className = $(this).attr('class');
if (className=="cell highlight")
{
alert("Matched");
}
$('.cell').css("background-color",get_random_color());   
var rnd;
function highlight()
{
var $divs = $('.cell').removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
}
highlight();
});
});