JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<div id="wrapper" class="container">
      <div id="grid">
        <div id="dial1" class="left1 top1 dial">1</div>
        <div id="dial2" class="left2 top1 dial">2</div>
        <div id="dial3" class="left3 top1 dial">3</div>
        <div id="dial4" class="left1 top2 dial">4</div>
        <div id="dial5" class="left2 top2 dial">5</div>
        <div id="dial6" class="left3 top2 dial">6</div>
        <div id="dial7" class="left1 top3 dial">7</div>
        <div id="dial8" class="left2 top3 dial">8</div>
        <div id="dial8" class="left3 top3 dial">9</div>
        <div id="dial10" class="left2 top4 dial">10</div>
      </div>
    </div>

CSS

#wrapper {
        margin-top: 20px;
      }   
      .overlay {
        z-index: 1;
      }
      #grid {
        position: relative;
        width: 160px;
        height: 180px;
        border: 1px solid #e6e6e6;
        margin: 0 auto;
      }
      .dial {
        color: #777;
        position: absolute;
        background-color: #ccc;
        padding: 3px 10px;
      }
      .left1 {
        left: 20px;
      }
      .left2 {
        left:60px;
      }
      .left3 {
        left: 100px;
      }
      .top1 {
        top: 20px;
      }
      .top2 {
        top:60px;
      }
      .top3 {
        top:100px;
      }
      .top4 {
        top:140px;
      }

JavaScript

$('.dial').click(function () {
          var $this = $(this);
          var position = $this.position();
          var height = $this.css('height');
          var width = $this.css('width');
          $this.addClass('overlay').animate({left:'0px',top: '0px',height:'100%', width: '100%'},'slow',function () {
            setTimeout(function () {
              $this.animate({left:position.left,top: position.top,height:height, width: width},'slow',function () {

              });
            },1000);
          });
        });