JSFiddle - React, Tailwind, and code Playground

HTML

<table class="bfmini-table striped" width="100%" cellspacing="0" cellpadding="5" border="1" align="center"><tbody><tr><td></td><td align="td_width center"><b>A</b></td><td align="td_width center"><b>B</b></td><td align="td_width center"><b></b></td><td align="td_width center"><b>C</b></td><td align="td_width center"><b>D</b></td><td align="td_width center"><b>E</b></td><td align="td_width center"><b>F</b></td><td align="td_width center"><b>G</b></td><td align="td_width center"><b>H</b></td><td align="td_width center"><b>I</b></td><td align="td_width center"><b>J</b></td><td align="td_width center"><b>K</b></td><td align="td_width center"><b>L</b></td></tr><tr class="now"> </tr><tr><td class="td_width">08h<br>-<br>09h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">09h<br>-<br>10h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">10h<br>-<br>11h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre"...

CSS

table{
  background: pink;
  position: relative;
}

.now{
  position: absolute;
  background-color: purple;
  height: 3px;
  width: 100%;
  z-index: 1;
  top: 4.5%;
}

JavaScript

let date = new Date();
let hauteur = null;
if (date.getHours() >8 && date.getHours() < 17)
{
  let heure_debut = 8;
  let heure_fin = 17;
  let nb_heures = heure_fin - heure_debut;
	let hauteur_entete = 4.5; //hauteur de l'entete
	let hauteur_heures = 100 - hauteur_entete; // hauteur des lignes des horaires
  let ratio_taille_heure = hauteur_heures / nb_heures; //taille d'une seule heure
  
	hauteur_heure_actuelle = (date.getHours() - heure_debut) * ratio_taille_heure;
  hauteur_minutes = date.getMinutes()/60 *ratio_taille_heure;
  hauteur = hauteur_entete + hauteur_heure_actuelle + hauteur_minutes;
  console.log(hauteur);
  document.getElementsByClassName("now")[0].style.top=hauteur+"%";
}