JSFiddle - React, Tailwind, and code Playground

HTML

<section id="hora-dia" onload="carregar()">
  <div id="msg">
  </div>

  <div id="foto">
    <img id="imagem" src="assets/img/dia.png" alt="Foto dia">
  </div>
</section>

JavaScript

function carregar(){
const img = document.getElementById('imagem')
const data = new Date()
const hora = data.getHours()

const msg = document.getElementById('msg')
msg.innerText = `${hora}h.`

if (hora >= 0 && hora < 12){
    // dia!
    img.src = 'assets/img/dia.png';
} else if (hora >= 12 && hora < 18){
    // tarde!
    img.src = 'assets/img/tarde.png';
} else{
    //noite!
    img.src = 'assets/img/noite.png';    
   }
}

carregar();