JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="8BOX.CSS" />
  </head>

  <body>
    <div class="box box-common">
      <div class="box1 box-common"></div>
      <div class="box2 box-common"></div>
      <div class="box3 box-common"></div>
      <div class="box4 box-common"></div>
      <div class="box5 box-common"></div>
      <div class="box6 box-common"></div>
      <div class="box7 box-common"></div>
      <div class="box8 box-common"></div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}


.box {
  height: 80px;
  width: 80px;
  background-color: rgb(0, 0, 0);
  margin: auto;
  margin-top: 300px;
  position: relative;



}

.box:hover {
  transform: rotate(270deg);

}

.box:hover .box1 {
  transform: translateX(0) translateY(-100px) rotate(0deg) ;

}

.box:hover .box2 {
  transform: translateX(100px) translateY(-100px) rotate(0deg) ;

}

.box:hover .box3 {
  transform: translateX(100px) translateY(0) rotate(0deg) ;

}

.box:hover .box4 {
  transform: translateX(100px) translateY(100px) rotate(0deg) ;

}

.box:hover .box5 {
  transform: translateX(0) translateY(100px) rotate(0deg) ;

}

.box:hover .box6 {
  transform: translateX(-100px) translateY(100px) rotate(0deg) ;

}

.box:hover .box7 {
  transform: translateX(-100px) translateY(0) rotate(0deg) ;

}

.box:hover .box8 {
  transform: translateX(-100px) translateY(-100px) rotate(0deg) ;

}

.box-common {
  height: 80px;
  width: 80px;
  box-sizing: border-box;
  border-radius: 5px;
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  /* transform:scale(1.1); */
}

.box1 {

  background-color: blue;
  margin: auto;
  margin-top: 0px;
  position: absolute;


}

.box2 {

  background-color: yellow;
  margin: auto;
  margin-top: 0px;
  position: absolute;

}

.box3 {


  background-color: rgb(0, 244, 53);
  margin: auto;
  margin-top: 0px;
  position: absolute;


}

.box4 {

  background-color: rgb(238, 0, 0);
  margin: auto;
  margin-top: 0px;
  position: absolute;
}

.box5 {

  background-color: rgb(30, 183, 203);
  margin: auto;
  margin-top: 0px;
  position: absolute;

}

.box6 {

  background-color: rgb(255, 119, 0);
  margin: auto;
  margin-top: 0px;
  position: absolute;

}

.box7 {

  background-color: rgb(192, 0, 230);
  margin: auto;
  margin-top: 0px;
  position: absolute;

}

.box8 {

  background-color: rgb(63, 139, 198);
  margin: auto;
  margin-top: 0px;
  position: absolute;

}