JSFiddle - React, Tailwind, and code Playground

by Stas Orekhovskiy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=">
	<title></title>
</head>
<body>
  <div class="container-box">
    <div class="container">
      <div class="block-rotate">
        <div class="block block-1"></div>
        <div class="block block-2"></div>
        <div class="block block-3"></div>
        <div class="block block-4"></div>
        <div class="block block-5"></div>     
      </div>
      <div class="block-center">Center text</div>
      <p class="text">1</p>
      <p class="text">2</p>
      <p class="text">3</p>
      <p class="text">4</p>
      <p class="text">5</p>
    </div>
  </div>
</body>
</html>

CSS

html, body{
  min-height: 100vh;
}
body{  
  background: #07344a;  
}
.test{
	  /* width: 200px; */
}
.container-box{
  width:400px;
  min-height: 400px;
  margin: 0;
  padding: 0;
  
}
.block-rotate{
    animation-name: rotation;
    /* animation-duration: 10s; */
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    min-height: 100%;
    z-index: 1;
    width: 100%;
  
}
.container{
  border: 3px solid #fff;
  position: relative;
  color: #fff;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.block-center{
  position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
  z-index: 9;
  background: yellow;
  width: 200px;
  height: 200px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block{
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  clip: rect(0px, 250px, 250px, 0px);
}
.text{
  position: absolute;
  z-index: 10;
  /* transform: rotate(0); */
  top: 20%;
  left: 20%;
}
.block-1{
  background: #05415f;
  transform: rotate(0);
}
.block-2{
  background: #018bb5;
  transform: rotate(90deg);
}
.block-3{
  background: #044664;
  transform: rotate(155deg);
  right: 0;
  bottom: 0;
  z-index: 2;
}
.block-4{
  background: #a4192d;
  transform: rotate(225deg);
  z-index: 2;
}
.block-5{
  background: #00a9d0;
  transform: rotate(-65deg);
}

@keyframes rotation {
		0% {
				transform: rotate(0deg);
		}
		100% {
				transform: rotate(360deg);			
		}
}