JSFiddle - React, Tailwind, and code Playground

by alokswain

HTML

<div class="test">
  <div id="square1">a</div>
  <div id="square2"></div>
  <div id="square3"></div>
  <div id="square4"></div>
</div>

CSS

#square1, #square2, #square3, #square4 {
  width: 10px;
  height: 10px;
  margin: 5px 0 0 5px;
  /*for centering purposes*/
  float: left;
  background: blue;
  -webkit-transition-property: all;
  -webkit-transition: width 1s, height 1s, margin 1s, top 1s;
  -moz-transition: width 1s, height 1s, margin 1s;
  -ms-transition: width 1s, height 1s, margin 1s;
  transition: width 1s, height 1s, margin 1s;
}
#square1:hover, #square2:hover, #square3:hover, #square4:hover {
  width: 110px;
  height: 110px;
  top: 100px;
  position: absolute;
  margin: 5px 0 0 5px;
  /* inital margin - ((intial margin - width (or height))/2) */
}
.test {
  width: 30px;
  max-height: 30px min-height: 30px;
}

JavaScript

$(document).ready(function(){
  $("#square1").dialog({
    height: 100,
    width: 100,
  
  });

});