JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="header_container">
   <label id="click" for="check">
     <div id="nav-icon2" style="
          transition: transform 0.5s cubic-bezier(0.54, 0.01, 0.57, 1.03) 0s;
          transform: translateY(0px);
        ">
       <span></span><span></span><span></span><span></span><span></span><span></span>
     </div>
   </label>
   <input type="checkbox" id="check" />
   <div class="header">
     <div class="input">
       <span><svg viewBox="0 0 560 560" xmlns="http://www.w3.org/2000/svg" stroke-miterlimit="1.414" stroke-linejoin="round" id="plex-icon-search-560" aria-hidden="true" class="PlexIcon-plexIcon-1hNiE2 QuickSearchInput-searchIcon-2AxXxk">
           <path d="M351.883,407.883C315.613,433.168 271.525,448 224,448C100.371,448 0,347.629 0,224C0,100.371 100.371,0 224,0C347.629,0 448,100.371 448,224C448,271.525 433.168,315.613 407.883,351.883L560,504L504,560L351.883,407.883ZM56,224C56,316.722 131.278,392 224,392C316.722,392 392,316.722 392,224C392,131.278 316.722,56 224,56C131.278,56 56,131.278 56,224Z"></path>
         </svg></span><input type="search" id="search" class="search" placeholder="Search any here" v-on:keyup="search_limiter" @input="(evt) => (query = evt.target.value)" />
     </div>
   </div>
   <div id="hidden_header">
     <ul>
       <li><a v-bind:href="/shows/">Tv Shows</a></li>
       <li><a v-bind:href="/movies/">Movies</a></li>
     </ul>
     <div>
       <a class="btn-close" v-on:click="menu_hide" href="#">X</a>
     </div>

     <div class="r">
       <div class="c liste_item">
         <h3>Années</h3>
         <multiselect v-model="old.value" v-bind="old"> </multiselect>
       </div>
       <div class="c liste_item">
         <h3>Genres</h3>
         <multiselect v-model="genre.value" v-bind="genre"> </multiselect>
       </div>
       <div class="c liste_item">
         <h3>Production</h3>
         <multiselect v-model="prod.value" v-bind="prod"> </multiselect>
       </div>
     </div>
   </div>
 </div>
 <div class="gallery">
 ...

CSS

body {
  height: 100vh;
  background: #555;
  background: radial-gradient(
    ellipse farthest-corner at center top,
    #6694c3,
    #071531
  );
  overflow: hidden;
}

body,
html {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background: #092756;
  background: -webkit-radial-gradient(
      0% 100%,
      ellipse cover,
      rgba(104, 128, 138, 0.4) 10%,
      rgba(138, 114, 76, 0) 40%
    ),
    linear-gradient(
      to bottom,
      rgba(57, 173, 219, 0.25) 0%,
      rgba(42, 60, 87, 0.4) 100%
    ),
    linear-gradient(135deg, #670d10 0%, #092756 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
  background: #555;
  background: radial-gradient(
    ellipse farthest-corner at center top,
    #6694c3,
    #071531
  );
  overflow: hidden;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
}

.header_container {
  display: block;
  height: 80px;
}
#nav-icon2 {
  width: 55px;
  height: 45px;
  top: 25px;
  left: 25px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  cursor: pointer;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
#nav-icon2 span {
  display: block;
  position: absolute;
  height: 7px;
  width: 50%;
  background: white;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#hidden_header {
  position: fixed;
  top: -100vh;
  left: 0;
  right: 0;
  height: 100vh;
  background: #333;
  z-index: 998;
  transition: top...