JSFiddle - React, Tailwind, and code Playground

HTML

<p>Heure d'arivée...

CSS

body {background: #333;}

p {text-align: center;font: 2em sans-serif;color: #fff;}

div {overflow-y: scroll;width: 80%;height: 500px;margin: auto;}
table {margin: 0;padding: 0;table-layout: fixed;width: 100%;font: 1em sans-serif;color: #fff;}
tr:hover td {background: #5FB75D !important;}
td {padding: 25px 20px;background: #3f3f3f;}
td:first-child {width: 100px;}
tr:nth-child(even) td {background: #484848;}

JavaScript

var	time = new Date(),
	h = time.getHours(),
	m = time.getMinutes();

var p = document.querySelector("p"),
	div = document.querySelector("div"),
	colonneHorraires = document.querySelectorAll("td:first-child");

p.innerHTML += h+":"+m;

var scrollToThisPosition,
	i = 0,
	l = colonneHorraires.length;

for ( ; i<l; i++){
	
	if (parseInt(colonneHorraires[i].innerHTML) == h) {

		scrollToThisPosition = colonneHorraires[(m/30 < 1) ? i : i+1].offsetTop;
		break;

	}
	
}

div.scrollTop = scrollToThisPosition;