JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lds-css ng-scope">
   <div class="lds-blocks" style="100%;height:100%">
      <div style="left:-7px;top:-7px;animation-delay:0s"></div>
      <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
      <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
      <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
      <div style="left:137px;top:65px;animation-delay:0.375s"></div>
      <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
      <div style="left:65px;top:137px;animation-delay:0.625s"></div>
      <div style="left:137px;top:137px;animation-delay:0.5s"></div>
   </div>
</div

CSS

@keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
@-webkit-keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
.lds-blocks {
  position: relative;
}
.lds-blocks div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #242D3C;
  -webkit-animation: lds-blocks 1s linear infinite;
  animation: lds-blocks 1s linear infinite;
}
.lds-blocks {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

.lds-css {
  display: flex; 
  flex-direction: row;
  justify-content: center; 
  text-align: center
}