JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="wheelContainer">
  <div class="seat">
    
  </div>
</div>

CSS

.wheelContainer {
  position: relative;
  border: solid 10px yellow;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0,
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%) 0 0,
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  
  animation: rotation 20s infinite linear;
}

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

.seat {
  background-color: lightbrown;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
}