JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<nav>
  <ul>
    <li>
     <label>
              <a>Rechercher </a>

        <input name="El"  type="radio">
        <div>
          <input placeholder="Rechercher ici" type="text">
          <label>
<a>☌</a>

<input name="El"  type="radio">
</label>
<span></span>
        </div>
      </label>
    </li>
    <li>Menu #1</li>
    <li>Menu #2</li>
    <li>Menu #3</li>
    <li>
    
     <label>
              <a>Mon Compte</a>

        <input name="El"  type="radio">
        <div class="acc">
       
       
          <label>
<a>go</a>
<input name="El"  type="radio">
</label>
        </div>
      </label>
    
    </li>
  </ul>
</nav>

<div class="pages">
<label>
<a></a>
<input name="El"  type="radio">
</label>
</div>

CSS

body,html{padding:0;margin:0;width:100%; height:100%;background-image: linear-gradient(to left bottom, #0f0b4e, #24116a, #3c1587, #5617a3, #7315bf, #7713bb, #7b11b7, #7e10b3, #671490, #51156e, #3b134e, #261030);}
*:focus {
    outline: none;
}
a{display:block;width:100%;
  height:100%;}
nav{  position: relative;  background: rgba(0,0,0,.8);;color:white; border-bottom:1px solid rgba(255,255,255,0.5);}
nav ul{list-style:none;padding:0;margin:0;}
nav > ul {
  margin: 0 50px;
  display: grid;
  grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5) ;
  grid-gap: 0;
}
nav > ul > li  {
text-align:center;
padding:15px 0;
cursor:pointer;
font-size:20px
}
nav > ul > li:hover  {
  background:rgba(255,255,255,0.1);
}
nav > ul > li > label > input{
  display:none;
}
nav > ul > li > label > a{
  display:block;
  width:100%;
  height:100%;
}
nav > ul > li > label > div{
   display: none;
  grid-template-columns: 90% auto;
  position: absolute;
  top: calc(100% + 1px);
  left:0;

  right:0;
  background: rgba(0,0,0,.8);
  padding:15px 55px;
  height: 50px;
  
}
nav > ul > li > label > div > label > a {
  font-size:44px;
      transform: rotateZ(90deg);
}

nav > ul > li > label > input:checked + div {
   display: grid;
   border-bottom:2px solid #548eea;
}

nav > ul > li > label > div input{
  background:rgba(0,0,0,0);
  border:0;
  font-size:24px;
  color:white;
  font-size: 100%;
font-weight: 400;
padding-left:10px;
}
nav > ul > li > label > div input[type="text"] {
      margin-bottom: 5px;
}
nav > ul > li > label > div button{
  background:rgba(0,0,0,0);
  border:0;
  color:white
}
input[type="radio"] {
  display:none;
}
.pages{width:100%; height:100%;}