JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div id="container">    

    <div id="main">
      <div id="outer-circle">
          <div class="square"></div>
          <div id="inner-circle">
          </div>
          
      </div>
    </div>
  
  </div>

CSS

html { 
    overflow-y: scroll;
    -webkit-font-smoothing: antialiased; }

  body {
      background: #2E2A69; }

  #main {
      width: 800px;
      height: 300px;
      margin: auto; }

  #outer-circle {
      -webkit-box-shadow: 0 0 50px 10px #453D9B;
      -moz-box-shadow: 0 0 50px 10px #453D9B;
      box-shadow: 0 0 50px 10px #453D9B;
      border-color:#746EBB;    
      margin: 20% auto;
      text-align:center;
      background: #ECEBFA;

      width: 220px;
      height: 220px;
    
      -webkit-border-radius: 220px;
      -moz-border-radius: 220px;
      border-radius: 220px;
    
      -webkit-animation:turning_cw 5s infinite linear;
      
    overflow: hidden;
}

#inner-circle {
    width: 210px;
    height: 210px;
    margin: 10px 10px;
    background: #fff;
    border-radius: 210px;
    z-index: 99;
}


.square {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #000;
}
      
  

  @-webkit-keyframes turning_cw {
      0%{
          -webkit-transform: rotate(0deg); }
      50% {
         -webkit-transform: rotate(180deg); }
      100%{
          -webkit-transform: rotate(360deg); }
  }