JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circles">
    <div class="circle circle_0">
    </div>
    <div class="circle circle_1">
    </div>
    <div class="circle circle_2">
    </div>
    <div class="circle circle_3">
    </div>
    <div class="circle circle_4">
    </div>
</div>

CSS

body
{
	background: #080808;
}

#circles
{
	position: absolute;
	top: 100px;
	left: 100px;
	margin-left: -8px;
	margin-top: -8px;
	width: 16px;
	height: 16px;
}

#circles > .circle
{
	position: absolute;
	width: 32px;
	height: 32px;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);

	background: transparent;
	opacity: 0.0;
	border-radius: 50%;
	border: 1px solid #ea4500;
	box-sizing: border-box;

	-webkit-animation: concentric_circles 5s ease-out infinite;
	   -moz-animation: concentric_circles 5s ease-out infinite;
	    -ms-animation: concentric_circles 5s ease-out infinite;
	     -o-animation: concentric_circles 5s ease-out infinite;
	        animation: concentric_circles 5s ease-out infinite;
}

#circles > .circle_0
{
	-webkit-animation-delay: 1s;
	   -moz-animation-delay: 1s;
	    -ms-animation-delay: 1s;
	     -o-animation-delay: 1s;
	        animation-delay: 1s;
}

#circles > .circle_1
{
	-webkit-animation-delay: 2s;
	   -moz-animation-delay: 2s;
	    -ms-animation-delay: 2s;
	     -o-animation-delay: 2s;
	        animation-delay: 2s;
}

#circles > .circle_2
{
	-webkit-animation-delay: 3s;
	   -moz-animation-delay: 3s;
	    -ms-animation-delay: 3s;
	     -o-animation-delay: 3s;
	        animation-delay: 3s;
}

#circles > .circle_3
{
	-webkit-animation-delay: 4s;
	   -moz-animation-delay: 4s;
	    -ms-animation-delay: 4s;
	     -o-animation-delay: 4s;
	        animation-delay: 4s;
}

#circles > .circle_4
{
	-webkit-animation-delay: 5s;
	   -moz-animation-delay: 5s;
	    -ms-animation-delay: 5s;
	     -o-animation-delay: 5s;
	        animation-delay: 5s;
}

@-webkit-keyframes concentric_circles
{
	0% {width: 8px;	height: 8px; opacity: 0.0;}	25% {opacity: 0.65;} 100%{width: 96px; height: 96px; opacity: 0.0;}
}
@-moz-keyframes concentric_circles
{
	0% {width: 8px;	height: 8px;...