JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Conteneur-Central">
	<div id="wrapper">
		<span id="un"></span><span id="deux"></span><span id="trois"></span><span id="quatre"></span><span id="cinq"></span>
		<section>
			<p>1</p>
			<a href="#"><span>nul</span></a><a href="#deux"><span>Suivant</span></a>
		</section><!--
	 --><section>
			<p>2</p>
			<a href="#un"><span>Précédent</span></a><a href="#trois"><span>Suivant</span></a>
		</section><!--
	 --><section>
			<p>3</p>
			<a href="#deux"><span>Précédent</span></a><a href="#quatre"><span>Suivant</span></a>
		</section><!--
	 --><section>
			<p>4</p>
			<a href="#trois"><span>Précédent</span></a><a href="#cinq"><span>Suivant</span></a>
		</section><!--
	 --><section>
			<p>5</p>
			<a href="#quatre"><span>Précédent</span></a><a href="#"><span>nul</span></a>
		</section>
	</div>
</div>

CSS

html, body {height:100%;}
html, body, section, p {margin:0;}
#Conteneur-Central {overflow:hidden;height:100%;}
#wrapper {white-space:nowrap;height:100%;}
#Conteneur-Central section {position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;color:#fff;transition:margin-left 1s ease;}
#Conteneur-Central section:nth-child(6) {background:#0099CC;}
#Conteneur-Central section:nth-child(7) {background:#12D05F;}
#Conteneur-Central section:nth-child(8) {background:#CC3029;}
#Conteneur-Central section:nth-child(9) {background:#FFC02A;}
#Conteneur-Central section:nth-child(10) {background:#CC3D91;}
#Conteneur-Central p {overflow:hidden;position:relative;top:45%;text-align:center;font:500% sans-serif;}
#Conteneur-Central a span {font-size:0 !important;color:transparent !important;}
#Conteneur-Central p+a:before {content:"«";left:2%;}
#Conteneur-Central a+a:before {content:"»";right:2%;}
#Conteneur-Central p+a:before, #Conteneur-Central a+a:before {position:absolute;width:60px;height:60px;top:50%;margin-top:-20px;text-align:center;font:250%/53px sans-serif;border-radius:30px;color:#333;background:#fff;}
#Conteneur-Central a[href="#"] {display:none;}

#un:target+span+span+span+span+section {margin-left:0;}
#deux:target+span+span+span+section {margin-left:-100%;}
#trois:target+span+span+section {margin-left:-200%;}
#quatre:target+span+section {margin-left:-300%;}
#cinq:target+section {margin-left:-400%;}