JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="sun">
  <div class="sun-circle"></div>
  <div class="sun-contour"></div>
  <div class="sun-rays">
    <div class="sun-rays-quater">
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
    </div>
    <div class="sun-rays-quater">
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
    </div>
    <div class="sun-rays-quater">
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
    </div>
    <div class="sun-rays-quater">
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
      <i class="sun-ray"></i>
    </div>
      
  </div>
</div>

CSS

*{
  box-sizing:border-box;
}
.sun{
  position:relative;
  width:300px;
  height:300px;
  background:#3267af;
  margin:30px auto;
}
.sun-circle{
  position:absolute;
  width:170px;
  height:170px;
  left:50%;
  margin-left:-85px;
  top:50%;
  margin-top:-85px;
  border-radius:50%;
  background:#fff732;
  z-index:100;
}
.sun-contour{
  position:absolute;
  width:170px;
  height:170px;
  left:50%;
  margin-left:-85px;
  top:50%;
  margin-top:-85px;
  border-radius:50%;
  background:#3267af;
  transform:scale(1);
  transform-origin:center center;
  animation:scaleContour 1.2s infinite;
  z-index:99;
  animation-timing-function:linear;
}
@keyframes scaleContour{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1);
  }
  100%{
    transform:scale(1.45);
  }
}

.sun-rays{
  width:200px;
  height:200px;
  position:absolute;
  left:50%;
  margin-left:-100px;
  top:50%;
  margin-top:-100px;
  transform:scale(0.7);
  transform-origin:center center;
  animation:scaleRays 1.2s infinite;
  animation-timing-function:linear;
}
@keyframes scaleRays{
  0%{
    transform:scale(0.7);
  }
  50%{
    transform:scale(1);
  }
  100%{
    transform:scale(1);
  }
}
.sun-ray{
  position:absolute;
  border-style:solid;
  border-color:transparent transparent #fff732 transparent;
  border-width:30px 20px 30px 20px;
  //transform:scaleY(1.6);
}
.sun-ray:nth-child(1){
  left:20px;
  top:-35px;
  transform:rotate(-30deg);
  transform-origin:center center;
}
.sun-ray:nth-child(3){
  right:20px;
  top:-35px;
  transform:rotate(30deg);
  transform-origin:center center;
}
.sun-ray:nth-child(2){
  left:50%;
  top:0;
  transform:translate3d(-50%,-50px,0);
}
.sun-rays-quater{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform-origin:center center;
}
.sun-rays-quater:nth-child(2){
  transform:rotate(90deg);
  
}
.sun-rays-quater:nth-child(3){
  transform:rotate(180deg);
  
}
.sun-rays-quater:nth-child(4){
  transform:rotate(270deg);
  
}