JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="fullpage">

<div class="section"id="slide" >
	<header >
	<div class="barreverticale">
      <a class="titre" href="http://127.0.0.1/projects/capbreton/">
      <img src="img/phare.png" alt="phare"/>
      </a>
      <nav id="navbar">

        <ul id="menu">
          <li class="item"> 
            <a class="cap-icon-spip-1"> </a> 
            <ul class="niveau2">
              <div class="h2"><h2> Hébergements </h2></div>
              <li> Hotels </li>
              <li> Chambre d'hôtes </li>
              <li> Gites </li>
              <li> Campings </li>
            </ul>
          </li>
          <li class="item"> 
            <a href= "#" class="cap-icon-spip-2"> </a> 
            <ul class="niveau2">
              <div class="h2"><h2> Restauration </h2></div>
              <li> Restaurants traditionnels </li>
              <li> Restaurants gastronomiques </li>
              <li> Pizzeria </li>
              <li> Crêperies </li>
            </ul >
          </li>
          <li class="item">
            <a href= "#" class="cap-icon-spip-4"> </a>
            <ul class="niveau2">
              <div class="h2"><h2> Balades & randonnées </h2></div>
              <li> Balades faciles</li>
              <li> Randonnées </li>
              <li> Randonnée itinérante</li>
              <li> Cartes et guide </li>
            </ul>
          </li>
          <li class="item"> 
            <a href= "#" class="cap-icon-spip-5"> </a>
            <ul class="niveau2">
              <div class="h2"><h2> Visiter & Découvrir </h2></div>
              <li>Visites guidées </li>
              <li> Patrimoine local </li>
              <li> Sites et musées </li>
              <li> Art et artisanat </li>
            </ul>
          </li>
          <li class="item"> 
            <a href= "#" class="cap-icon-spip-6"> </a>
            <ul class="niveau2">
              <div class="h2"><h2> Activités & Loisirs </h2></div>
              <li> Sports et activités de loisirs...

CSS

@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.eot');
    src: url('roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff'),
         url('roboto-regular-webfont.ttf') format('truetype'),
         url('roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aldosemibold';
    src: url('aldopc-webfont.eot');
    src: url('aldopc-webfont.eot?#iefix') format('embedded-opentype'),
         url('aldopc-webfont.woff2') format('woff2'),
         url('aldopc-webfont.woff') format('woff'),
         url('aldopc-webfont.ttf') format('truetype'),
         url('aldopc-webfont.svg#aldosemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
.section {
	margin:0;
}

/*---------------HEADER--------------------------*/


.barreverticale {
	margin-left : 10px;
	position:absolute;
	top:0px;
	z-index:5000;
	height:100%;
	width:100%;
}
.titre {
	width:6%;
	background-color:white;
	line-height:2;
	height:12.1%;
	position:absolute;
	z-index:3;
}
.titre img {
	max-width:100%;
}
h1 {
  font-size: 19px;
  margin:0;
  text-transform: uppercase;
  color:white;
  text-align: center;
  padding:16px;
}
#logo {
	z-index:2;
	position:absolute;
	top:28%;
	left:42%;
	max-width:20%;

	}
logo img {
max-width:100%;
	height:auto;
	
}
#fleche{
	
	background-color: #1C170C;
	width: 5%;
	text-align: center;
	z-index:1;
}
#fleche a {
	position:fixed;
	bottom: 20px;
	left: 50%;
	font-size:3em;
	color: #FFFFFF;
	text-decoration:none;
	z-index:999;
}*/

/*--------------------NAVBAR---------------------*/

nav{
	background-color:white;
	margin-top:5.6%;
	width:6%;
	height:90%;
	}

/*.fixed {
	position:fixed;
	top:0px;
	margin:0px;
	z-index:2000;
	width:83%;
}	*/
	
#menu a {
	display:block;
	font-size:2em;
    color:...