JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<input type="checkbox" id="attivami" style="display: none;">
<label for="attivami" id="attivami_stile">Attivami</label>
<ul class="menu">
 <li>music</li>
 <li>fashion</li>
 <li>sports</li>
 <li>gaming</li>
 <li>tv</li>
 <li>sneakers</li>
 <li>social</li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
  background: #e5e5e5;
  margin: 0;
  font-family: 'Lato', sans-serif;
}

.menu {
  background: transparent;
  height: 100px;
  width: 100%;
  line-height: 100px;
  list-style: none;
  position: absolute;
  z-index: 1000;
  top: 0px;
  left: 0px;
}

.menu > li {
  float: left;
  margin-left: 1rem;
  position: relative;
  z-index: 1000;
  text-transform: uppercase;
}

.menu::before {
  content: ' ';
  background: #fff;
  height: 0px;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  transition: height 0.3s linear;
}

#attivami_stile {
  cursor: pointer;
  background: #ff453a;
  color: #fff;
  text-transform: uppercase;
  padding: 15px;
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 42px);
}

input[id=attivami]:checked ~ .menu::before {
  height: 100px;
}