JSFiddle - React, Tailwind, and code Playground
HTML
<p class="time">12:30</p>
<p class="time">15:30</p>
<p class="time">16:00</p>
<p class="time">16:30</p>
JavaScript
$(document).ready(function(){
function findTime(){
var d = new Date();
var min;
if(d.getMinutes()<30)
min = '00';
else
min = '30';
//$("p").text(d.getHours()+":"+min);
return(d.getHours()+":"+min);
}
window.setInterval(function(){
var presentTime = findTime();
var future = 0;
$(".time").each(function(){
$("h1").text($(this).text());
if (future){
$(this).css("background", "blue");
}
else{
if($(this).text()==presentTime)
{
$(this).css("background", "green");
future = 1;
}
else
$(this).css("background", "yellow");
}
})
}, 1000);
});