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">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
      <div class="box7"></div>
      <div class="box8"></div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}


.box {
  height: 80px;
  width: 120px;
  background-color: rgb(0, 0, 0);
  margin: auto;
  margin-top: 300px;
  position: relative;
  transform-origin:50% 50%;
  transition-duration:2s;

}
.box:hover  {
 transform: rotate(20deg);

}

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

}

.box:hover .box2 {
  transform: translateY(200px) translateX(200px) rotate(360deg);
}

.box:hover .box3 {
  transform: translateY(200px) translateX(-200px) rotate(360deg);
}

.box:hover .box4 {
  transform: translateX(-200px) translateY(-200px) rotate(360deg);
}

.box:hover .box5 {
  transform: translate(200px) translate(200px) rotate(360deg);
}

.box:hover .box6 {
  transform: translate(-200px) translate(-200px) rotate(360deg);
}

.box:hover .box7 {
  transform: translateY(-200px) rotate(360deg);
}

.box:hover .box8 {
  transform: translateY(200px) rotate(360deg);
}


.box1 {
  height: 80px;
  width: 120px;
  background-color: blue;
  margin: auto;
  margin-top: 0px;
  position: absolute;
  transition: 2s;
  border: solid 5px black;
}

.box2 {
  height: 80px;
  width: 120px;
  background-color: yellow;
  margin: auto;
  margin-top: 0px;
  position: absolute;
  transition: 2s;
  border: solid 5px black;
}

.box3 {
  height: 80px;
  width: 120px;
  background-color: rgb(0, 244, 53);
  margin: auto;
  margin-top: 0px;
  position: absolute;
  transition: 2s;
  border: solid 5px black;
}

.box4 {
  height: 80px;
  width: 120px;
  background-color: rgb(238, 0, 0);
  margin: auto;
  margin-top: 0px;
  position: absolute;
  transition: 2s;
  border: solid 5px black;
}

.box5 {
  height: 80px;
  width: 120px;
  background-color: rgb(30, 183, 203);
  margin: auto;
  margin-top: 0px;
  position: absolute;
  transition: 2s;
  border: solid 5px black;
}

.box6 {
  height: 80px;
  width: 120px;
  background-color: rgb(255, 119, 0);
  margin: auto;
  margin-top: 0px;
  position: absolute;
  transition: 2s;
  border: solid 5px...