JSFiddle - React, Tailwind, and code Playground
HTML
<div class="background">
<div class="cupBox">
<div id="1" class="cup"></div>
<div id="2" class="cup"></div>
<div id="3" class="cup"></div>
</div>
<div class="menu">
<label id="shells"></label> Shells
<br />
<button id="start" onClick="move()">START</button>
</div>
</div>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.background {
background: #000000 url('http://s12.postimg.org/iqhxe3vvf/image.jpg') no-repeat bottom left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height: 100%;
}
.cup {
background: url('http://s12.postimg.org/93ef4e2vx/Cup_Down2.png');
width: 123px;
height: 207px;
display: inline-block;
margin-right: 50px;
}
.cupBox {
width: 700px;
height: 220px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -135px;
}
.menu {
width: 450px;
height: 75px;
border: 1px solid black;
position: absolute;
bottom: 0;
margin: 0 auto;
}
JavaScript
$(document).ready(function(){
$("#start").bind('click', shuffle);
function shuffle(){
$(".cupBox").each(function(){
var divs = $(this).find('div');
for(var i = 0; i < divs.length; i++) $(divs[i]).remove();
//the fisher yates algorithm, from http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array
var i = divs.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = divs[i];
var tempj = divs[j];
divs[i] = tempj;
divs[j] = tempi;
}
for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);
});
}
});