JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="dot" id="pulse1"></div>
<div class="dot" id="pulse2"></div>
<div class="dot" id="pulse3"></div>

CSS

html {
  height: 100%;
}
body {
  background: #222;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dot {
  width: 20em;
  height: 20em;
  position: relative;
  margin: 20em;
  border-radius: 20em;
  -webkit-border-radius: 20em;
  -moz-border-radius: 20em;
  -khtml-border-radius: 20em;
  z-index: 0;
}
#pulse1 {
  -moz-animation: pulse 2s ease-in-out 0 infinite normal;
  -webkit-animation: pulse 2s ease-in-out 0 infinite normal;
  -ms-animation: pulse 2s ease-in-out 0 infinite normal;
}
#pulse2 {
  -moz-animation: pulse 2s ease-in-out 0.4s infinite normal;
  -webkit-animation: pulse 2s ease-in-out 0.4s infinite normal;
  -ms-animation: pulse 2s ease-in-out 0.4s infinite normal;
}
#pulse3 {
  -moz-animation: pulse 2s ease-in-out 0.8s infinite normal;
  -webkit-animation: pulse 2s ease-in-out 0.8s infinite normal;
  -ms-animation: pulse 2s ease-in-out 0.8s infinite normal;
}
@-moz-keyframes pulse {
  from {
    width: 0em;
    height: 0em;
    margin: 0em;
    background: #007fff;
  }
  to {
    width: 20em;
    height: 20em;
    margin: -10em;
    background: rgba(0, 127, 255, 0);
  }
}
@-webkit-keyframes pulse {
  from {
    width: 0em;
    height: 0em;
    margin: 0em;
    background: #007fff;
  }
  to {
    width: 20em;
    height: 20em;
    margin: -10em;
    background: rgba(0, 127, 255, 0);
  }
}
@-ms-keyframes pulse {
  from {
    width: 0em;
    height: 0em;
    margin: 0em;
    background: #007fff;
  }
  to {
    width: 20em;
    height: 20em;
    margin: -10em;
    background: rgba(0, 127, 255, 0);
  }
}