JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class='c'>


<div class='s'>
<div class='o'>

</div>
</div>

<div class='i'>

</div>

<div class='i2'>

</div>
</div>

CSS

body{
  background: black;
  padding: 100px;
  
}

.c {
  height: 70px;
  width: 70px;
   position: relative;

   border-radius: 20px;
}

.s {
   position: absolute;
     left: 0;
   top: 0;
   height: 70px;
   width: 70px;
  border-radius: 20px;
   overflow: hidden;
}

.o {
  

   
  height: 100px;
  width: 100px;
  margin-top: -10px;
  margin-left: -10px;
 

  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
 
  background-image: linear-gradient(yellow, yellow), linear-gradient(yellow, yellow), linear-gradient(yellow, yellow), linear-gradient(blue, blue);
  animation: rotate 2s linear infinite;
  
}

@keyframes rotate {
  100% {
    transform: rotate(1turn)
  }
}

.i {
  
  position: absolute;
  left: 5px;
  top: 5px;
  height: 60px;
  width: 60px;
  border-radius: 25%;
  background-color: #333;
}

.i2 {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 70px;
  width: 70px;
  border-radius: 25%;

}