JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<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">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;
  position : relative;
  left : 0;
  right : 0;
  transition : all linear 2s;
}

.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 getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(){
   var cups = $(".cupBox").find('.cup');
   var cup1 = $(cups[getRandomInt(0,cups.length - 1)]);
   var cup2 = $(cups.not(cup1)[getRandomInt(0, cups.length - 2)]);
   var cup1Offset = cup1.offset();
   var cup2Offset = cup2.offset();
   cup1.offset(cup2Offset);
   cup2.offset(cup1Offset);                   
}