JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timeOfDay" style="width:100px; height:100px;"></div>

CSS

.dawn{
    background:grey;
}
.morning{
    background:yellow;
}
.day{
    background:blue;
}
.sunset{
    background:orange;
}
.dusk{
    background:darkblue;
}
.night{
    background:black;
}

JavaScript

$( document ).ready(function() {
applyclass();
});


function applyclass()
{
var d = new Date();
var n = d.getHours();

if (n >= 3 && n < 7) 
$('.timeOfDay').addClass('dawn');

else if (n >= 7 && n < 11) 
$('.timeOfDay').addClass('morning');

else if (n >= 11 && n < 15)
$('timeOfDay').addClass('day');

else if (n >= 15 && n < 19) 
$('.timeOfDay').addClass('sunset');

else if (n >= 19 && n < 21) 
$('.timeOfDay').addClass('dusk');

else
$('.timeOfDay').addClass('night');

}