JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='circle-2'></div>

CSS

@keyframes heatPulse {
  0% { transform: scale(0); opacity: 1; }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.circle-2 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 25px;
  top: 25px;
  border-radius: 9999px;
  border: 12px solid red;
  background: transparent;
  animation: heatPulse 2s infinite;
}