JSFiddle - React, Tailwind, and code Playground

by Dzhav

HTML

<ul id="flowers">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

#flowers * { box-sizing: border-box; }
#flowers:after {content:""; display:table; clear:both;}
#flowers {width: 200px; margin: 5px 0 0; padding: 0; position: relative; list-style: none;}
#flowers li {
    width:100px; 
    height:100px; 
    position:relative; 
    float:left; 
    animation: rota 3s linear infinite;
    -moz-animation: rota 3s linear infinite; /* Firefox */
    -webkit-animation: rota 3s linear infinite; /* Safari and Chrome */
    -o-animation: rota 3s linear infinite; /* Opera */
}
#flowers li:nth-child(1) {
    border-radius: 0 50% 50% 50%; 
    background: rgba(253, 163, 66 ,0.5); 
    top: 15px; 
    left: 15px; 
    box-shadow: inset 0 0 15px #f8790e, 0 0 15px rgba(255,255,255,0.2);}
#flowers li:nth-child(2) {
    border-radius: 50% 0 50% 50%;
    background: rgba(179, 248, 12, 0.5);
    right: 15px;
    top: 15px;
    box-shadow: inset 0 0 15px #f7b809, 0 0 15px rgba(255,255,255,0.2);
}
#flowers li:nth-child(3) {
    border-radius: 50% 50% 50% 0;
    background: rgba(253, 112, 191, 0.5);
    left: 15px;
    bottom: 15px;
    box-shadow: inset 0 0 15px #f7438a, 0 0 15px rgba(255,255,255,0.2);
}
#flowers li:nth-child(4) {
    border-radius: 50% 50% 0 50%;
    background: rgba(32, 205, 237, 0.5);
    right: 15px;
    bottom: 15px;
    box-shadow: inset 0 0 15px #0ca2ef, 0 0 15px rgba(255,255,255,0.2);
}

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

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