JSFiddle - React, Tailwind, and code Playground

by BeNdErR

HTML

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af562a2a63.js" crossorigin="anonymous"></script>
<div class='container'>
<div class="menu-content">
  <label class="open-menu-all" for="open-menu-all">
   <input class="input-menu-all" id="open-menu-all" type="checkbox" name="menu-open" />
  <div class="navegacao-mobile">
    <span class="linha-menu"></span>
    <span class="linha-menu"></span>
    <span class="linha-menu"></span>
  </div>
  <ul class="list-menu">
    <li class="item-menu">
      <a href="https://www.cupcom.com.br/" target="_blank" class="link-menu">Menu 1</a>
    </li>
    <li class="item-menu">
      <a href="https://www.cupcom.com.br/" target="_blank" class="link-menu">Menu 2</a>
    </li>
    <li class="item-menu">
      <a href="https://www.cupcom.com.br/" target="_blank" class="link-menu">Menu 3</a>
    </li>
    <li class="item-menu">
      <a href="https://www.cupcom.com.br/" target="_blank" class="link-menu">Menu 4</a>
    </li>
    <li class="item-menu">
      <a href="https://www.cupcom.com.br/" target="_blank" class="link-menu">Menu 5</a>
    </li>
 </ul>
 </label>
</div>
  
</div>

   <div style="display: block; margin: 0 auto; text-align: center; margin-top: 50px">
      <script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="UCpXTlrDWlpN46PKieJ-FcPw" data-layout="full" data-count="hidden"></div>
   </div>

SASS

/* vars */

$menu_background: #035e8d;
$menu_color: #e2e2e2;
$menu_breakpoint : 1024px;
$menu_toggle_background: black;
$menu_border: 1px solid rgba(255,255,255,0.1);
$menu_padding: 15px 20px;
$menu_icon_padding: 5px 10px;

/* hide show mixin */

@mixin show () {
  display: block;
  animation: grow .5s ease-in-out; 
}

@mixin hide () {
  display: none;
}

/* global  styles */

.menu {
  background: $menu_background;
}

.menu ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 

.menu,
.menu a {
  color: $menu_color;
  text-decoration: none;
}

.menu a {
  display: block;
  white-space: nowrap; 
}

.menu-dropdown,
.menu input[type="checkbox"] { 
  @include hide;
}

.menu label:hover {
  cursor: pointer;
}

/* narrow styles */

@media screen and (max-width: $menu_breakpoint) {
  
  .menu > ul,
  .menu-righticon {
    @include hide;
  }
  input[type="checkbox"]:checked + ul {
    @include show;
  }
}

/* large styles */

@media screen and (min-width: $menu_breakpoint + 1px) {
 
  .menu > label,
  input[type="checkbox"] {
    @include hide;
  }
  .menu a {
    padding: $menu_padding;
  }
 
  .menu > ul > li {
    display: inline-block;
  }

  .menu-hasdropdown {
    position: relative;
    &:hover {
      > ul {
        @include show;
      }
    }
  }

  .menu-hasdropdown > ul {
    position: absolute;
    top:100%;
    left: 0;
    background: $menu_background;
  }

  .menu-hasflyout > ul {
    left: 100%;
    top:0;
  }
  .menu-hasflyout .menu-downicon {
    @include hide;
  }
}





/* look and feel only, not needed for core menu*/


@keyframes grow {
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    display: block;
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

html { font-size: 100%; }
body {
  font-family: 'Roboto' sans-serif;
  line-height: 1.5;
}

.menu-dropdown a {
  padding: $menu_padding;
  border-bottom: $menu_border;
}

/* narrow  */
@media screen and (max-width: $menu_breakpoint) {
 .menu > label {
    background:...