JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class="b-example" id="example-four2" style="border: 1px solid yellow;">
  <div class="b-example" id="example-four2" style="border: 1px solid blue;">
    <div class="b-example" id="example-four2" style="border: 1px solid red;"><div class="b-example" id="example-four2" style="border: 1px solid red;"></div><div class="b-example" id="example-four2" style="border: 1px solid red;"></div><div class="b-example" id="example-four2" style="border: 1px solid red;"></div><div class="b-example" id="example-four2" style="border: 1px solid red;"></div><div class="b-example" id="example-four2" style="border: 1px solid red;"></div><div class="b-example" id="example-four2" style="border: 1px solid red;"></div></div>
  </div>
</div>

CSS

.b-example {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 20px 20px 0;
}
#example-four2 {
  border-radius: 5px 40px 5px;
  background: #BADA55;

  animation-name: spin;
  animation-duration: 20000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  
}

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