JSFiddle - React, Tailwind, and code Playground

by flexi2202

HTML

<!doctype html>
<html lang="fr">
<head>
<head>
  <meta charset="UTF-8">
  <title>CodePen - Video Background Transparent Navbar</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body >
<!-- partial:index.partial.html -->
<header>
  <div class="header">
  
  <div class="header-left">
      <a href="#" class="navbar-logo">Logo</a>
	  <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...

CSS

.navbar-logo{
  padding-left:10%;
  font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
  color:#fff; 
}



#video-bg{
  width:100%;
 
}

.header {
  display: flex;
  width:80%;
  text-align:center;
}

.header-left {
  background: red;
  width:25%;
  padding-left:3%;
}
.navigation {
   padding-top:30px;
  padding-bottom:30px;
  position:absolute;
  top:0;
  width:50%;
  z-index:1;
  flex: 1 1;
}
.header-right {
  background: green;
  width:25%;
  padding-right: 3%;
}
  #wrap{
      width: 50%; 
      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:80%;
		height:75%;
		overflow:hidden;
			position:absolute;
			top:0;
			left:0;
}

}
.navbar-logo{
  padding-left:10%;
  font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
 ...