JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle" class="offline"></div>

CSS

#circle{
    height:2rem;
    width:2rem;
    
    border-radius: 4rem;
    
     opacity: 0.0;

    -webkit-animation: pulsate 1000ms ease-out;
    -webkit-animation-iteration-count: infinite; 
        
    -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.offline{
    background:red;
}

.online{
    background:green;
}