JSFiddle - React, Tailwind, and code Playground

HTML

<title>Collège René Cassin</title>



	




<body  >
    
	<div class="blackboard">
        
<div id="menu_gauche"> 
	<div id="case_menu" >1ere Catégorie </div>
		<ul>
			<li>	<a href="#acceuil" id="case_menu"> Acceuil 		</a> </li>
			<li>	<a href="#renecassin" id="case_menu"> Rene Cassin			</a> </li>	
			<li>	<a href="#SEGPA" id="case_menu"> SEGPA			</a> </li>								
			<li>	<a href="#nonfranco" id="case_menu"> non-Francophone</a> </li>								
		</ul>
	<div id="case_menu" >2eme Catégorie </div>
		<ul>
			<li>	<a id="case_menu"> <!--Insérer activité --></a> </li>
			<li>	<a id="case_menu"> <!--Insérer activité --></a> </li>
			<li>	<a id="case_menu"> <!--Insérer activité --></a> </li>
			<li>	<a id="case_menu"> <!--Insérer activité --></a> </li>
			<li>	<a id="case_menu"> <!--Insérer activité --></a> </li>	
		</ul>						
</div>

		<div class="cadre_milieu" id="page">	
			<div class="contenu_milieu">
			
				<div id="acceuil">
				<div class="polaroidME">
					<img src="images/PolaroidCollegeRESIZEDV2.png">
				</div>				
				Bienvenu au Collège René Cassin de Chanteloup-les-Vignes,<br><br/>
				Le collège  acceuil des élèves de la classe de 6eme à la 3eme, il a la particularité de disposer de classes <a href="nonFrancophone.php" >non francophone</a> et d'une section <a href="SEGPA.php">SEGPA</a>.
				Il est situé à proximité d'un complexe sportif où la plupart des cours d'Education Physique et Sportive s'y déroule.
				BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA BLABLABLA BLABLABLA BLABLA BLA BLABLABLABLA...

CSS

/*copyright by romain coppée*/

/*style du contenu, taille... */
#conteneur   {margin: 0 auto;position:relative;width:817px;text-align:left;}

/*header du site GSB*/
#header      {position:relative;color:#000000;font-family:Comic Sans MS, Arial, Helvetica, sans-serif;font-size:50px;text-align: center;} /*Le header représente la bannière*/
.hautdepage{position:relative;color:#000000;font-family:Comic Sans MS, Arial, Helvetica, sans-serif;font-size:30px;text-align: center;padding-top:50px;}

/*fin header du site GSB */




/*style relatif à l'apparence générale*/
body, html    {background:url(images/fond.jpg) repeat;background-attachment: fixed;font-family:Verdana, Arial, Helvetica, sans-serif;color:#000000;font-size:11px} /*fond d'écran du site + police par défaut*/

		   

/*Class permettant d'ajouter du style (au texte, image...)*/  	  	    
a         {color:#000000;text-decoration: none;outline:none;font-weight:bold;} /*lien*/
a:hover   {text-decoration:underline; border-width:1;}   /*couleur au survol de la souris d'un lien*/



.titre{text-align:center}
.separateur{height:30px;margin-top:40px; background:url(images/traitcraie.png) no-repeat;}

.blackboard{position:absolute;background:url(images/blackboardRESIZED.jpg) no-repeat;background-attachment:scroll;height:720px; width:1000px; background-position:fixed;margin-left:15%; margin-top:0;}
.cadre_milieu{overflow:auto;margin-left:270px;margin-top:15px;width:650px; height:400px;position:relative;word-wrap:break-word;text-align:justify;font-family:Comic Sans MS, Arial, Helvetica, sans-serif; font-size:15px; }
 .polaroidME{position:relative;margin-left:30px;float:right;} 
.contenu_milieu{position:relative;height:auto; width:90%;}

.polaroid {float:right;  position: relative;  width: 220px;margin-left:15px ;margin-top:20px;text-align:center;}
    .polaroid img { border: 15px solid #fff;padding:0px;  border-bottom: 45px solid #fff;  -webkit-box-shadow: 3px 3px 3px #777;     -moz-box-shadow: 3px 3px 3px #777;       ...

JavaScript

$('a[href^="#"]').click(function(){  
        var the_id = $(this).attr("href");  
        $('html, body').animate({  
            scrollTop:$(the_id).offset().top  
        }, 'slow');  
        return false;  
    });