JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="x">
  <div class="xx xx-1"></div>
  <div class="xx xx-2"></div>
  <div class="xx xx-3"></div>
  <div class="xx xx-4"></div>
  <div class="xx xx-5"></div>
  <div class="xx xx-6"></div>
</div>

CSS

html,
body {
  height: 100%;
}

.x {
  position: absolute;
  top: 50%;
  left: 50%;
}

.xx {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #000;
  transition: .2s;
  display: none;
}

.xx-1 {
  display: block;
  transform: rotateZ(60deg) translateX(-80px);
}

body:active .xx-1 {
    transform: rotateZ(60deg) translateX(-160px);
}

.xx-2 {
  display: block;
  transform: rotateZ(-60deg) translateX(80px);
}

body:active .xx-2 {
    transform: rotateZ(-60deg) translateX(160px);
}

.xx-3 {
  display: block;
    transform: translateX(-80px);

}

body:active .xx-3 {
    transform: translateX(-160px);
}

.xx-4 {
  display: block;
    transform: translateX(80px);
}

body:active .xx-4 {
    transform: translateX(160px);
}






.xx-5 {
  display: block;
    transform: rotateZ(120deg) translateX(80px);
}

body:active .xx-5 {
    transform: rotateZ(120deg) translateX(160px);
}




.xx-6 {
  display: block;
    transform: rotateZ(-120deg) translateX(-80px);
}

body:active .xx-6 {
    transform: rotateZ(-120deg) translateX(-160px);
}