JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#tab a {
	color: blue;
}
#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";}

/* CSS target */
#onglet1:target~nav>:nth-child(1),
#onglet2:target~nav>:nth-child(2),
#onglet3:target~nav>:nth-child(3) {color: red}

#onglet1:target~div>:first-child {margin-left: 0}
#onglet2:target~div>:first-child {margin-left: -100%}
#onglet3:target~div>:first-child {margin-left: -200%}