JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tab">
	<nav>
		<a href="#onglet1">Onglet1</a>
		<a href="#onglet2">Onglet2</a>
		<a href="#onglet3">Onglet3</a>
	</nav>
	<div>
		<div id="onglet1"></div><!--
	 --><div id="onglet2"></div><!--
	 --><div id="onglet3"></div>
	</div>
</div>

CSS

#tab a {
	color: blue;
}
#tab a.current {
	color: red;
}
#tab>div {
	overflow: hidden;
	white-space: nowrap;
	height: 400px;
}
#tab>div>div {
	white-space: normal;
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
}
#tab>div>div:before {
	position: absolute;
	width: 100%;
	top: 48%;
	text-align: center;
	font: 2em sans-serif;
	color: #fff;
}
#tab>div>div:nth-of-type(1) {background: #09f;}
#tab>div>div:nth-of-type(2) {background: #a0e;}
#tab>div>div:nth-of-type(3) {background: #c00;}
#tab>div>div:nth-of-type(1):before {content: "1";}
#tab>div>div:nth-of-type(2):before {content: "2";}
#tab>div>div:nth-of-type(3):before {content: "3";}