JSFiddle - React, Tailwind, and code Playground

by flexi2202

HTML

<header class="header">
   <div class="header-left">
       <a href="#" class="navbar-logo">Logo</a>
   </div>
   <div id="wrap">
      <ul class="navbar">
        <li>
          <a href="#">Acceuil</a>
        </li>
        <li>
          <a href="#">Livres</a>
          <ul>
            <li><a href="#">Apprendre HTML</a></li>
            <li><a href="#">Apprendre CSS</a></li>
            <li><a href="#">Apprendre JavaScript</a></li>
            <li>
              <a href="#">Apprendre PHP</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Questionnaires</a>
          <ul>
            <li><a href="#" >CSS de Base</a></li>
            <li><a href="#">PHP de Base</a></li>
            <li><a href="#">JavaScript de Base</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Outils</a>
          <ul>
            <li><a href="#">Images géométriques</a></li>
            <li><a href="#">Pipette de couleur</a></li>
            <li><a href="#">Générateur de code</a></li>
            <li><a href="#">Éditeur HTML</a></li>
            <li>
              <a href="#">Base 64</a>
            </li>
          </ul>
        </li>
       
      
      </ul>
    </div>
   <div class="header-right">
     <a href="https://www.facebook.com/axedis" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f232ee949e83eb7ba3_facebook.svg" loading="lazy" alt=""></a>
		<a href="https://www.linkedin.com/company/axedis-eta/" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f3782fc23479738208_linkedin.svg" loading="lazy" alt=""></a>
		<a href="https://www.youtube.com/channel/UCKGtfGpUPjR6mz46p5rbLVw" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f71e05b083762b3d1965a66_youtube.svg" loading="lazy" alt="" class="yt-icon"></a>
		<a href="tel:010/435353"...

CSS

.header {
  display: flex;
}

.header-left {
  background: red;
  width:33%;
}
.navigation {
   padding-top:30px;
  padding-bottom:30px;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
  flex: 1 1;
}
.header-right {
  background: green;
  width:33%;
}
  #wrap{
      width: 100%; 
      height: 50px; 
      margin: 0;
      z-index: 99; 
      position: relative; 
     
      }
      .navbar{
      height: 50px;
      padding: 0;
      margin: 0;
      position: absolute; 
      }
      .navbar li{
      height: auto;
      width: 135.8px; 
      float: left;  
      text-align: center; 
      list-style: none;  
      font: normal bold 13px/1em Arial, Verdana, Helvetica;  
      padding: 0;
      margin: 0;
     
      }
      .navbar a{							
      padding: 18px 0;  
      border-left: 1px solid #ccc9c9;
      text-decoration: none; 
      color: white; 
      display: block;
      }
      .navbar li:hover, a:hover {
      background-color: #444444;
      } 
      .navbar li ul{
      display: none;
      height: auto;									
      margin: 0; 
      padding: 0; 
      }				
      .navbar li:hover ul{
      display: block;
      }
      .navbar li ul li {
      background-color: #444444;
      } 
      .navbar li ul li a{
      border-left: 1px solid #444444; 
      border-right: 1px solid #444444; 
      border-top: 1px solid #c9d4d8; 
      border-bottom: 1px solid #444444; 
      }
      .navbar li ul li a:hover{
      background-color: #a3a1a1;
      }
      .video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}