JSFiddle - React, Tailwind, and code Playground

HTML

<p>
du blabla sur 
<br><br><br><br><br>
plusieurs lignes
</p>

<table>
<tr class="now"> </tr>
<tr>
  <td>8h</td><td class="plein"></td><td></td><td class="plein"></td>
</tr>
<tr>
  <td>9h</td><td></td><td class="plein"></td><td></td>
</tr>
<tr>
  <td>10h</td><td></td><td class="plein"></td><td></td>
</tr>
<tr>
  <td>11h</td><td></td><td class="plein"></td><td></td>
</tr>
<tr>
  <td>12h</td><td></td><td class="plein"></td><td></td>
</tr>
<tr>
  <td>13h</td><td class="plein"></td><td></td><td></td>
</tr>
<tr>
  <td>14h</td><td></td><td class="plein"></td><td></td>
</tr>
<tr>
  <td>15h</td><td></td><td class="plein"></td><td></td>
</tr>
<tr>
  <td>16h</td><td></td><td></td><td class="plein"></td>
</tr>
<tr>
  <td>17h</td><td></td><td></td><td class="plein"></td>
</tr>
</table>

<p>
encore du blabla<br><br><br><br><br> sur plusieurs lignes
</p>

CSS

td{
  background: lightgreen;
  width: 100px;
  height:15px;
}

tr td:first-of-type{
  background: lightgreen;
}

td.plein{
  background: red;
}

table{
  background: pink;
  position: relative;
}

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

JavaScript

let date = new Date();
let hauteur = null;
if (date.getHours() >8 && date.getHours() < 17)
{
	hauteur = (date.getHours() - 8) * 10;
  hauteur += date.getMinutes() /6;  
  console.log(hauteur);
  document.getElementsByClassName("now")[0].style.top=hauteur+"%";
}