JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<h1 align="center"> <img class="banner" src="https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/jquery-128.png"></h1>
  <form method="POST">
    <div id="shuffle">
    <div id="cell1">1</div>
    <div id="cell2">2</div>
    <div id="cell3">3</div>
    <div id="cell4">4</div>
    <div id="cell5">5</div>
    <div id="cell6">6</div>
    <div id="cell7">7</div>
    <div id="cell8">8</div>
    <div id="cell9">9</div>
    <div id="cell10">10</div>
    <div id="cell11">11</div>
    <div id="cell12">12</div>
    <div id="cell13">13</div>
    <div id="cell14">14</div>
    <div id="cell15">15</div>
    <div id="cell16">16</div>
    <div id="cell17">17</div>
    <div id="cell18">18</div>
    <div id="cell19">19</div>
    <div id="cell20">20</div>
    <div id="cell21">21</div>
    <div id="cell22">22</div>
    <div id="cell23">23</div>
    <div id="cell24">24</div>
    <div id="cell25">25</div>
          <div id="cell26">26</div>
          <div id="cell27">27</div>
          <div id="cell28">28</div>
          <div id="cell29">29</div>
          <div id="cell30">30</div>
   </div>
   <a href="#" id="btn1" class="button">Div Shuffle</a>
   <br>
   <a href="#"  id="btn2" class="button">Background Theme</a>
   <br>
   <a href="#"  id= "btn3" class="button">Add and Remove Class</a>
   <br>
  <a href="#"  id= "btn4" class="button">Reload</a>
       </form>

CSS

@import url(http://fonts.googleapis.com/css?family=Varela+Round);
body {
    background-color: DodgerBlue;
} 
form{
    margin-left: 25%;
    margin-right:25%;
    width: 100%;
}
.highlight {
 background:green;
 opacity:0.3;
 filter:alpha(opacity=1);
}
#shuffle > div {
    float: left;
    text-align: center;
    line-height: 50px;
    width: 50px;
    height: 50px;
    color: rgba(0, 0, 0, 0.5);
    background-color:Gold;
    border-radius: 5px;
    margin: 5px;
}

#shuffle {
    background-color: DodgerBlue;
    max-width: 100px;line-height:40px
    height:360px;
    float:left;
    font-size: 16pt;
    filter:alpha(opacity=40);
    padding:10px;
    max-width: 300px;
}
.button {
    border: 1px #E1AD00 solid;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
    display: inline-block;
    color: #7B5F00;
    font-size: .9em;
    background: #F4D03F;
    background: -moz-linear-gradient(top,#FFF2C7 0,#FFD548 4%,#FAC100 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-          stop(0%,#FFF2C7),color-stop(4%,#FFD548),color-stop(100%,#FAC100));
    background: -webkit-linear-gradient(top,#FFF2C7 0,#FFD548 4%,#FAC100 100%);
    background: -o-linear-gradient(top,#FFF2C7 0,#FFD548 4%,#FAC100 100%);
    background: -ms-linear-gradient(top,#FFF2C7 0,#FFD548 4%,#FAC100 100%);
    background: linear-gradient(to bottom,#FFF2C7 0,#FFD548 4%,#FAC100 100%);
    filter:    progid:dximagetransform.microsoft.gradient(startColorstr='@color',endColorstr='darken(@color, 15%)',GradientType=0);
    padding: 8px 14px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    font-size: 15px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 2em;
}

.button:active {
    background: #F5D76E;
    border-color: #AE8600 #E1AD00 #E1AD00;
    padding: 9px 14px 7px;
    top: auto;
}

JavaScript

$("#shuffle div").click(function(e) {  
var Original = ($(this).attr("id"));  
alert("You Clicked : "+Original)
}); 
$("#shuffle div").hover(function() {  
 $(this).css('cursor', 'pointer');  
 }, function() {  
 $(this).css('cursor', 'auto');  
 });  
$('#btn1').click(function(){
    var parent = $("#shuffle");  
    var divs = parent.children();  
    while (divs.length) {  
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);  
}  
});
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;
}  
$('#btn2').click(function(){  
$("body,#shuffle").css("background-color",get_random_color());  
});
$('#btn3').click(function(){ 
var $divs = $("#shuffle > div ").removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
});
$('#btn4').click(function() {
    location.reload();
});