JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    	<div id="wrapper">
        	<div id="bmenu">
            	<ul>
        			<li><a href="#accueil">Accueil</a></li>
					<li><a href="#compétences">Compétences</a></li>
        			<li><a href="#contact">Contact</a></li>
                </ul>
        	</div>

			<img src="img/Moi2.png"/>
        
		</br>
    
    	<h1><span class="vert">Q</span>ui suis-je ?</h1>
        </br>
        <p style="text-align: justify;">Je m'appelle <span class="vert">Victor</span>, j'ai <span class="vert">17 ans</span>, je suis diplômé en <span class="vert">marketing</span> et je suis passionné par les nouvelles technologies. Mon projet futur serait de <span class="vert">devenir développeur de site internet ou d'applications mobiles</span>. Je vis près de Paris, en France et je fais du football en club <span class="vert">depuis 14 ans.</span></p>
        
        </br>
        
        <div id="social">
        	<li><a href="https://www.facebook.com/victor.dufour.142" target="_blank"><img src="img/facebooknb.png" alt="image" onmouseover="javascript:this.src='img/facebook.png';" onmouseout="javascript:this.src='img/facebooknb.png';"/></a></li>
            <li><a href="https://twitter.com/DfrVictor" target="_blank"><img src="img/twitternb.png" alt="image" onmouseover="javascript:this.src='img/twitter.png';" onmouseout="javascript:this.src='img/twitternb.png';"/></a></li>   
       	</div>
        <div id="snap">
            <li><a href="#" class="info"><img src="img/snapchatnb.png" alt="image" onmouseover="javascript:this.src='img/snapchat.png';" onmouseout="javascript:this.src='img/snapchatnb.png';"/><span class="bulle">Victor.Dufour</span></a></li>
        </div>
        </div>
	</div>



	<div id="contenu">
    	<h2 id="accueil">Accueil</h2> 
        
        <p style="text-align: justify;"><span class="vert">T</span>est
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean...

JavaScript

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

	var target = document.querySelector(this.hash),
		start = new Date();

	var tween = function (){
		
		var progress = (new Date - start) / 2000;
	
		(progress > 1) && (progress = 1);

		var delta  = (progress < .5) ? Math.pow(2 * progress, 2) / 2 : (2 - Math.pow(2 * (1 - progress), 2)) / 2,
			result = (target.offsetTop - window.pageYOffset) * delta + window.pageYOffset;

		window.scrollTo(0, result);

		if (progress == 1) return;

		window.requestAnimationFrame(tween);
		
	}

	tween();

}

var a = document.querySelectorAll("a"),
	i = 0,
	l = a.length;

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