JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" onclick="swipe('left');">&lt;-</button>
	<button type="button" onclick="swipe('right');">-&gt;</button>
	<div id="timeline">
		<div id="container">
			<div id="item_1" class="item active">
				<div class="event">Event 1<br />Event 1</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_2" class="item active">
				<div class="event">Event 2 Event 2 Event 2</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_3" class="item active">
				<div class="event">Event 3<br />Event 3</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_4" class="item active">
				<div class="event">Event 4<br />Event 4</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_5" class="item active">
				<div class="event">Event 5<br />Event 5</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_6" class="item">
				<div class="event">Event 6<br />Event 6</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_7" class="item">
				<div class="event">Event 7<br />Event 7</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_8" class="item">
				<div class="event">Event 8<br />Event 8</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div><div id="item_9" class="item">
				<div class="event">Event 9<br />Event 9</div>
				<div class="date">26-04-2021<br />17:56</div>
				<div class="circle"></div>
			</div>
		</div>
	</div>

CSS

#timeline {
	padding-bottom: 15px;
	height: 9vw;
	white-space: nowrap;
	overflow: hidden;
}

#container {
	height: 100%;
	position: relative;
}

.item {
	white-space: normal;
	width: calc((100% / 6));
	height: 100%;
	display: inline-block;
	border-bottom: 3px solid grey;
	position: relative;
}

#item_1 {
	border-width: 3px;
	border-style: solid;
	border-image: linear-gradient(to right, transparent, grey);
	border-image-slice: 1;
	border-top: none;
	border-right: none;
	border-left: none;
}

.item:after {
  position: absolute;
  background: grey;
  content: '';
  height: calc(100% - 15px);
  width: 1px;
  top: 0;
  right: 0;
}

.event {
	position: absolute;
	right: 5px;
	top: 0;
	text-align: right;
	color: grey;
	font-weight: bold;
	font-size: 1.4em;
}

.date {
	position: absolute;
	right: 5px;
	top: 50%;
	text-align: right;
	color: grey;
	font-size: 0.8em;
}

.circle {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: grey;
	position: absolute;
	right: -10px;
	bottom: -11px;
}






.item.active {
	border-bottom: 3px solid green;
}

#item_1.item.active {
	border-width: 3px;
	border-style: solid;
	border-image: linear-gradient(to right, transparent, green);
	border-image-slice: 1;
	border-top: none;
	border-right: none;
	border-left: none;
}

.item.active:after {
	background: green;
}

.item.active .event {
	color: green;
}

.item.active .date {
	color: green;
}

.item.active .circle {
	background-color: green;
}






@media (max-width: 1280px) {
	#timeline {
		height: 10vw;
	}
	
	.item {
		width: calc((100% / 5));
	}
	
	.event {
		font-size: 1.2em;
	}

	.date {
		font-size: 0.8em;
	}
}

@media (max-width: 900px) {
	#timeline {
		height: 12vw;
	}
	
	.item {
		width: calc((100% / 4));
	}
	
	.event {
		font-size: 1em;
	}

	.date {
		font-size: 0.8em;
	}
}

@media (max-width: 600px) {
	#timeline {
		height: 15vw;
	}
	
	.item {
		width: calc((100% / 3));
	}
	
	.event {
		font-size: 0.8em;
	}

	.date {
		font-size: 0.6em;
	}
}

JavaScript

function setSizes(){
	console.log('');
	document.querySelector('#timeline').style.width = '';
	document.querySelector('#item_1').style.width = '';
	
	windWid = window.innerWidth;
	contWid = document.querySelector('#timeline').offsetWidth;
	itemWid = document.querySelector('#item_1').offsetWidth;
	cntItemVis = Number.parseInt(windWid/itemWid);
	cntItemAct = document.querySelectorAll('.item.active').length;
	
	document.querySelector('#timeline').style.width = (itemWid*cntItemVis)+'px';
	allItems = document.querySelectorAll('.item');
	for(i=0; i<allItems.length; i++){
		allItems[i].style.width = itemWid+'px';
	}
	
	stepsToLeft = cntItemAct - ((cntItemVis + (cntItemVis%2))/2);
	document.querySelector('#container').style.left = '0px';
	if(stepsToLeft > 0)
		for(i=0; i<stepsToLeft; i++)
			swipe('left');
	
	console.log('== ' + stepsToLeft);
	/*
	console.log(windWid);
	console.log(contWid);
	console.log(itemWid);
	console.log(cntItemVis);
	console.log(cntItemAct);
	console.log(cntItemVis%2);
	*/
}

setSizes();

window.addEventListener('resize', setSizes);

function swipe(direct){
	itemLeft = document.querySelector('#container').style.left;
	if(itemLeft)
		itemLeft = Number.parseInt(itemLeft);
	else
		itemLeft = 0;
	console.log(itemLeft);
	
	if((direct == 'left') && (itemLeft > (itemWid*(allItems.length - cntItemVis)*(-1))))
		document.querySelector('#container').style.left = (itemLeft - itemWid) + 'px';
	else if((direct == 'right') && (itemLeft < 0))
		document.querySelector('#container').style.left = (itemLeft + itemWid) + 'px';
}