JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<span class="pulse"></span>

CSS

.pulse {
  margin: 100px;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 80%;
  background: #28A745;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,183,18, 0.7);
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0,183,18, 0.7);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(0,183,18, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0,183,18, 0);
  }
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0,183,18, 0.7);
    box-shadow: 0 0 0 0 rgba(0,183,18, 0.7);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(0,183,18, 0);
      box-shadow: 0 0 0 10px rgba(0,183,18, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(0,183,18, 0);
      box-shadow: 0 0 0 0 rgba(0,183,18, 0);
  }
}