JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loader1">
	        	<i></i>
	      	</div>
<br/><br/><br/>
	<div class="loader2">
	        	<i></i>
	      	</div>
<br/><br/><br/>
	<div class="loader3">
	        	<i></i>
	      	</div>
<br/><br/><br/>
	<div class="loader4">
	        	<i></i>
</div>
<br/><br/><br/>
	<div class="loader5">
	        	<i></i>
	      	</div>

CSS

/* Custom Stylesheet */
body, html {
      margin: 0;
      -webkit-font-smoothing: antialiased;
      background: #68ABAD;
      text-align: center;
  }
  
  /* DEMO 1 */
  .loader1 {
    margin: 0 auto;
    height: 20px;
    width: 20px;
    position:relative;
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
  }
  .loader1 i{
    height: 20px;
    width: 20px;
    border-radius: 25px;
    display: block;
    position:absolute;
  }
  .loader1 i:before, .loader1 i:after{
	  content:'';
	  display:block;
	  position:absolute;
	  height:inherit;
	  width:inherit;
	  border-radius: inherit;
  }
  .loader1 i:first-child:before {
    background:rgba(52, 149, 221, 0.9);
    -webkit-animation:rotate-top-left 1.5s linear infinite;
    -moz-animation:rotate-top-left 1.5s linear infinite;
  }
  .loader1 i:first-child:after {
    background:rgba(225, 73, 44, 0.9);
    -webkit-animation:rotate-top-right 1.5s linear infinite;
    -moz-animation:rotate-top-right 1.5s linear infinite;
  }
  .loader1 i:last-child:before {
    background:rgba(249, 206, 43, 0.9);
    -webkit-animation:rotate-bottom-left 1.5s linear infinite;
    -moz-animation:rotate-bottom-left 1.5s linear infinite;
  }
  .loader1 i:last-child:after {
    background:rgba(0, 153, 117, 0.9);
    -webkit-animation:rotate-bottom-right 1.5s linear infinite;
    -moz-animation:rotate-bottom-right 1.5s linear infinite;
  }
  @-webkit-keyframes spin{
    0%{
      -webkit-transform:rotate(0deg);
    }
    50%{
      -webkit-transform:rotate(-180deg);
    }
    100%{
      -webkit-transform:rotate(-360deg);
    }
  }
  @-webkit-keyframes rotate-top-right{
    0%{
      -webkit-transform:rotate(0deg);
    }
    50%{
      -webkit-transform:rotate(-180deg);
      -webkit-transform-origin: 20% 20%;
    }
    100%{
      -webkit-transform:rotate(-360deg);
    }
  }
  @-webkit-keyframes rotate-top-left{
    0%{
      -webkit-transform:rotate(0deg);
    }
    50%{
     ...