JSFiddle - React, Tailwind, and code Playground

HTML

<title>test</title>
<?php include("animation.php") ?>
</head>

<body>
  <!----------------------MENUS------------------------->
    <div id="menus">
    	<div id="menuG">    
           
               <div id="btn_un"></div>
               <div id="btn_deux"></div>
               <div id="btn_trois"></div>
            
    	</div>    	
       
     </div>

    <!---------------------CONTENEURS-------------------->
    <div id="wrap">
		<div id="gauche">
        	<div id="deuxg" class="gauche"><div class="centrage"><img src="./images/2.png"></div></div>
        	<div id="ung" class="gauche"><div class="centrage"><img src="./images/1.png"></div></div>
        	<div id="troisg" class="gauche"><div class="centrage"><img src="./images/3.png"></div></div>
        </div>
        <div id="droite">
        	<div id="troisd" class="droite"><div class="centrage"><img src="./images/3.png"></div></div>
			<div id="und" class="droite"><div class="centrage"><img src="./images/1.png"></div></div>
        	<div id="deuxd" class="droite"><div class="centrage"><img src="./images/2.png"></div></div>
        </div>
	</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}

body, html, #wrap{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
	max-width:1950px;
	min-width:860px;
	max-height:1080px;
	min-height:600px;
}

/*==================MENUS================*/
#menus{
	cursor:pointer;	
}

#menuG{
	width:49.8%;
	height:100%;
	z-index:10000;
	position:absolute;
	left:0;
	margin-top:5px;
	overflow:hidden;
}

#menuG ul{
	right:0px;
	position:absolute;
}

#menuG img{
	margin-left:-20px;
}

#menuD{
	width:49.8%;
	height:100%;
	z-index:10000;
	position:absolute;
	right:0;
	margin-top:5px;
	overflow:hidden;
}

#menuD ul{
	left:0;
	position:absolute;
}

#btn_un{
    width:127px;
    height:39px;
    background:#F00;
	right:-88px;
	position:absolute;
	top:0px;
}

#btn_deux{
    width:127px;
    height:39px;
    background:#F00;
	right:-88px;
	position:absolute;
	top:42px;
}

#btn_trois{
    width:127px;
    height:39px;
    background:#F00;
	right:-88px;
	position:absolute;
	top:83px;

}

#btn_quatre{
    width:127px;
    height:39px;
    background:#F00;
	left:-88px;
	position:absolute;
	transition:all 0.3s;
}

#btn_cinq{
    width:127px;
    height:39px;
    background:#F00;
	left:-88px;
	position:absolute;
	top:42px;
	transition:all 0.3s;
}

#btn_six{
    width:127px;
    height:39px;
    background:#F00;
	left:-88px;
	position:absolute;
	top:83px;
	transition:all 0.3s;
}

/*=================ICONES==============*/
#mail{
	right:2px;
	bottom:0;
	position:absolute;
}

#twitter{
	left:2px;
	bottom:0;
	position:absolute;
}
/*=================CONTENEURS==============*/

#gauche{
	height:300%;
	width:50%;
	position:absolute;
	left:0;
	top:-100%;
	overflow:hidden;
	border-right:1px solid #333;
}

#droite{
	height:300%;
	width:50%;
	position:absolute;
	right:0;
	top:-100%;
	overflow:hidden;
	border-left:1px solid #333;
}

.gauche{
	height:33.33%;
	width:100%;
}

.droite{
	height:33.33%;
	width:100%;
}

#ung, #und{
}

#deuxg,...

JavaScript

$(function(){
		//HOVER SUR BOUTON 1:
		$( "#btn_un" ).mouseover(function() {
		  $( this ).css({ right:"0"});
		});
	
		$( "#btn_un" ).mouseout(function() {
		  $( this ).css({ right:"-88px"});
		});
    
    		//HOVER SUR BOUTON 1:
		$( "#btn_deux" ).mouseover(function() {
		  $( this ).css({ right:"0"});
		});
	
		$( "#btn_deux" ).mouseout(function() {
		  $( this ).css({ right:"-88px"});
		});
    
    		//HOVER SUR BOUTON 3:
		$( "#btn_trois" ).mouseover(function() {
		  $( this ).css({ right:"0"});
		});
	
		$( "#btn_trois" ).mouseout(function() {
		  $( this ).css({ right:"-88px"});
		});
		
		//PAGE ACTIVE
		 $("#menuG div").click(function() {
			 $("#menuG div").each(function(){
				 $(this).animate({ right:"-88px"} );
		 	 $(this).bind('mouseover').bind('mouseout')
			});
			 $(this).animate({ right:"0px"} );
		 	 $(this).unbind('mouseover').unbind('mouseout')

		});

				

	//MENU GAUCHE - SLIDE GAUCHE==========================
	$('#btn_un').click(function(){
		$('#gauche').animate({
			top:"-100%"
		},1000);
	});
	$('#btn_deux').click(function(){
		$('#gauche').animate({
			top:"0%"
		},1000);
	});
	$('#btn_trois').click(function(){
		$('#gauche').animate({
			top:"-200%"
		},1000);
	});
	//MENU DROIT - SLIDE DROIT===========================
	$('#btn_quatre').click(function(){
		$("#droite").animate({
			top:"-100%"
		},1000);
	});
	$('#btn_cinq').click(function(){
		$("#droite").animate({
			top:"-200%"
		},1000);
	});
	$('#btn_six').click(function(){
		$("#droite").animate({
			top:"0%"
		},1000);
	});

});