JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clockDiv"></div>

CSS

div{
    height:200px;
}
span{
    display:block;
    width:100%;
    text-align: center;
    font: 20px/200px Arial;
}
.madrugada{
    background: rgb(85, 98, 126);
}
.manha{
    background: yellow;
}
.tarde{
    background: orange;
}
.entardecer{
    background: rgb(194, 79, 15);
}

.noite{
    background: gray;
}

JavaScript

function clock() {
   var now = new Date();
   var horario = now.getHours();
    

   if((horario >= 0) && (horario < 6)){
       $( "#clockDiv" ).addClass("madrugada")
       .append('<span>Isso não são horas de estar acordado!</span>')
   }
   if((horario >= 6) && (horario < 12)){
       $( "#clockDiv" ).addClass("manha")
       .append('<span>Bom dia!</span>')
   }
   if((horario >= 12) && (horario < 18)){
       $( "#clockDiv" ).addClass("tarde")
       .append('<span>Boa Tarde!</span>')
   }
   if((horario >= 18) && (horario < 24)){
       $( "#clockDiv" ).addClass("noite")
       .append('<span>Boa Noite!</span>')
   }    
}
clock();