JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cp-wrapper">

		<h1>CSS<span>PIN</span></h1>
		<div class="cp-spinners">
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-round"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-pinwheel"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-balls"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-bubble"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-flip"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-hue"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-skeleton"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-eclipse"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-boxes"></div>
			</div>
			<div class="cp-spinner-block">	
					<div class="cp-spinner cp-morph"></div>
			</div>
		</div>
		<p class="credits">&copy; Crafted with
	 at <a href="https://design.webkul.com/" target="_blank">Webkul UXlab</a></p>
        <!--//Credits-->

CSS

/*Global Variables*/
/*Colors*/
/*Box Size*/
/*Speed*/
/*Global Mixins*/
/*Global Spinner*/
.cp-spinner {
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
/*Round Spinner*/
.cp-round:before {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px #bababa;
  border-right: solid 6px #bababa;
  border-bottom: solid 6px #bababa;
  border-left: solid 6px #bababa;
  position: absolute;
  top: 0;
  left: 0;
}
.cp-round:after {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px #F56151;
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  border-left: solid 6px transparent;
  position: absolute;
  top: 0;
  left: 0;
  animation: cp-round-animate 1s ease-in-out infinite;
}
/*Round Spinner Animation*/
@keyframes cp-round-animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*Pinwheel Spinner*/
.cp-pinwheel {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 24px #0fd6ff;
  border-right: solid 24px #58bd55;
  border-bottom: solid 24px #eb68a1;
  border-left: solid 24px #f3d53f;
  animation: cp-pinwheel-animate 1s linear infinite;
}
/*Pinwheel Spinner Animation*/
@keyframes cp-pinwheel-animate {
  0% {
    border-top-color: #0fd6ff;
    border-right-color: #58bd55;
    border-bottom-color: #eb68a1;
    border-left-color: #f3d53f;
    transform: rotate(0deg);
  }
  25% {
    border-top-color: #eb68a1;
    border-right-color: #f3d53f;
    border-bottom-color: #0fd6ff;
    border-left-color: #58bd55;
  }
  50% {
    border-top-color: #0fd6ff;
    border-right-color: #58bd55;
    border-bottom-color: #eb68a1;
    border-left-color: #f3d53f;
  }
  75% {
    border-top-color: #eb68a1;
   ...