JSFiddle - React, Tailwind, and code Playground

HTML

<!-- header -->

	<header>
		<div id="header-header">
     <div id="hamburger">

			</div>
			<div id="title">
				<h:link outcome="index" title="Retourner sur la page d'accueil">
				</h:link>
			</div>
			<div id="logo">
			
			</div>
		</div>
    
    <!-- menu -->
		<nav id="dropdown-menu" class="menu-open">
			<a id="profil" class="open-box menu-item"><span>Profil</span></a><!--
		--><a class="menu-item"><span>
			Administrateur</span></a><!--
		--><a href="" class="menu-item"><span>Aide</span></a><!--
		--><a href="" class="menu-item"><span>Déconnexion</span></a>
		</nav>
	</header>
  
  <div style="overflow: hidden"></div>

	

	<section>
  </section>

CSS

/*-- Général --*/

body{
	margin:0;
	padding: 0;
	font-family: Verdana,Helvetica,Arial;
	position: relative;
	background-color: #eee;
}
/*-- header --*/
 
header{
	display: block;
    background-color: #219741;
	position: fixed;
	width: 100%;
    box-shadow: 0 1px 1px #555;
    z-index: 16;

}

header #title{
	display: inline-block;
    width: 74%;
    text-align: center;
    color: white;
    font-size: 2em;
    position: absolute;
    top: 19px;
    font-style: italic;
    right: 12%;
}
#dropdown-menu{
	background-color: #f1f0d1;
	width: 100%;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	padding-left: 7px;
}
header #title .big{
	font-size: 1.2em;
}

header #title a{
    color: white;
    text-decoration: none;
}

.menu-open{
	max-height:105px;
}



#dropdown-menu.menu-close span{
	top:-35px;
}

#dropdown-menu.menu-open span{
	top: 0px;
}


#dropdown-menu span{
    padding: 4px 4%;
    margin: 6px 1px;
    display: inline-block;
    border-radius: 3px;
    transition: background-color 0.2s ease-out,
    		top 0.3s ease-out;
    color: black;
    text-decoration: none;
    position: relative;
    top: 0px;
}

#dropdown-menu .menu-item{
	text-decoration: none;
	color: black;
}

#dropdown-menu span:hover{
	background-color: #D6D4A5;
}




section{
	margin: 110px 20px 20px 20px;
}

section{
	margin: 110px 20px 20px 20px;
  display: inline-block;
	background-color: white;
	border-radius: 2px;
	box-shadow: 0 1px 1px 0px #aaa;
  height: 500px;
  width: 90%;
}

header #hamburger
{
    position: absolute;
    top: 22px;
    left: 22px;
    width: 35px;
    height: 35px;
    padding: 7px;
    border-radius: 4px;
 	transition: background-color 0.2s ease-out;

}

header #hamburger:hover
{
    cursor: pointer;
    background-color: #36AD56;
}

header #hamburger img{
	width: 100%;
}



header #logo{
    margin-top: 6px;
    display: inline-block;
    float: right;
    margin-right: 22px;
    height: 80px;
}



header #logo img{
	height: 80px;
}