JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

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


<h3>Below will be triggered by an ajax request to PHP</h3>
<div class="set" rel="online">set status to online</div>
<div class="set" rel="offline">set status to offline</div>
<div class="set" rel="some-other-status">set status to some other status</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;
}

@-webkit-keyframes pulsate {
    0% {opacity: 0.1;}
    40% {opacity: 1.0;}
    60% {opacity: 1.0;}
    100% {opacity: 0.1;}
}

.offline{
    background:red;
}

.online{
    background:green;
}

.some-other-status{
    background:blue;  
}

/* useless */
.set{
  background:#ededed;
    margin-bottom:1rem;
    padding: 1rem;
    cursor:pointer;
        -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;
}

.set:hover{
     background:#dedede;
 
}
}

JavaScript

$( document ).ready(function() {
    console.log( "ready!" );
    
    $('.set').click(function() {
  
        statusToSet = $(this).attr("rel");
        // alert("statusToSet "+statusToSet);
        $('#circle').removeClass();
        $('#circle').addClass(statusToSet);
    
    });
});


// $('#circle').addClass("online");