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";}

JavaScript

function navTab(e){
	
	e.preventDefault();

	history.pushState(null, null, this.hash);

	for (var i=0; i<l; i++)
		a[i].classList.remove("current");

	this.classList.add("current");

	cont.scrollLeft = cont.offsetWidth * [].slice.call(tab).indexOf(document.querySelector(this.hash));

}

if (location.hash)
	document.querySelector("a[href='"+ location.hash +"']").classList.add("current");

var cont = document.querySelector("#tab>div"),
	  tab  = document.querySelectorAll("#tab>div>div");

var a = document.querySelectorAll("#tab a[href^='#']"),
	  i = 0,
  	l = a.length;

for (; i<l; i++)
	a[i].addEventListener("click", navTab, false);