JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div class="circle">

</div>

CSS

.circle {
    border-radius: 50%;
    display: inline-block;
    position: relative;
    width:100px;
    height:100px;
    margin:100px;
    border:#f00 solid 2px;
    -webkit-animation-name:hvr-pulse;
    animation-name:hvr-pulse;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite
}
.circleZ:after {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
    border-radius: 50%;
    position: absolute;
    top: 10px; left: 10px;
}

@-webkit-keyframes hvr-pulse{
  25%{-webkit-transform:scale(1.1);transform:scale(1.1)}
  75%{-webkit-transform:scale(0.9);transform:scale(0.9)}
}
@keyframes hvr-pulse{
  25%{-webkit-transform:scale(1.1);transform:scale(1.1)}
  75%{-webkit-transform:scale(0.9);transform:scale(0.9)}
}
@-webkit-keyframes hvr-pulse{
  25%{-webkit-transform:scale(1.1);transform:scale(1.1)}
  75%{-webkit-transform:scale(0.9);transform:scale(0.9)}
}
@keyframes hvr-pulse{
  25%{-webkit-transform:scale(1.1);transform:scale(1.1)}
  75%{-webkit-transform:scale(0.9);transform:scale(0.9)}
}