JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="bg"></div>
<div class="square"></div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.bg { 
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  transition: background-color 5s ease-in;
  z-index: 1;
}
.square {
  z-index: 2;
  box-sizing: border-box;
  border: 1px solid #999;
  height: 200px; width: 200px;
  background: linear-gradient(white, white);
  transition: all 10s ease;
  transform-origin: center;
}

.square:hover + .bg {
  background-color: #aaa;
}
.square:hover {
  border-radius: 45%;
  border: 15px solid #fff;
  background: linear-gradient(skyblue 25%, white 75%);
  box-shadow: 0 0 20px 30px lightblue;
  transform: rotate(calc(360deg * 100));
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}