JSFiddle - React, Tailwind, and code Playground

by BeNdErR

HTML

<nav role='navigation' class="gfloris-menu">
  <label for="gfloris-menu">Menu <i class="fa fa-bars"></i></label>
  <input type="checkbox" id="gfloris-menu">
  <ul>
    <li><a href="#">TUTTI</a></li>
    <li><a href="/category/per-la-mamma">PER LA MAMMA</a></li>
  <li><a href="/category/pronta-consegna">PRONTA CONSEGNA</a></li>
  <li><a href="/category/ceramica-personalizzata">CERAMICA PERSONALIZZATA</a></li>
    <li class="gfloris-menu-hasdropdown">
      <a href="#">CERAMICA 
        <label title="toggle menu" for="ceramica">
          <i class="fa fa-caret-down"></i>
        </label>
      </a>
      <input type="checkbox" id="ceramica">
      <ul class="gfloris-menu-dropdown">
        <li class="gfloris-menu-hasdropdown menu-hasflyout">
          <a href="/category/piatti">PIATTI
          <label title="toggle menu" for="piatti">
              <i class="fa fa-caret-down menu-downicon"></i>
              <i class="fa fa-caret-right menu-righticon"></i>
            </label>
            </a>
              <input type="checkbox" id="piatti">
          <ul class="gfloris-menu-dropdown">
            <li><a href="/category/piatti-piccoli">PIATTI PICCOLI</a></li>
			<li><a href="/category/piatti-medi">PIATTI MEDI</a></li>
            <li><a href="/category/piatti-grandi">PIATTI GRANDI</a></li>
			<li><a href="/category/portatorte">PORTATORTE</a></li>
          </ul>
            </li>
        <li class="gfloris-menu-hasdropdown menu-hasflyout">
          <a href="/category/tazze">TAZZE
            <label title="toggle menu" for="tazze">
              <i class="fa fa-caret-down menu-downicon"></i>
              <i class="fa fa-caret-right menu-righticon"></i>
            </label>
            </a>
              <input type="checkbox" id="tazze">
          <ul class="gfloris-menu-dropdown">
            <li><a href="/category/tazzine-caffe">TAZZINE CAFFÈ</a></li>
			<li><a href="/category/tazze-te-piatto">TAZZE TÈ</a></li>
            <li><a...

CSS

.gfloris-menu {
    background: #fff;
    font-family: "Roboto" sans-serif;
    line-height: 1.5;
  }
  .gfloris-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .gfloris-menu, .gfloris-menu.gfloris-menu a {
    color: #0d0d0d;
    text-decoration: none;
  }
  .gfloris-menu a {
    display: block;
    white-space: nowrap;
  }
  .gfloris-menu label:hover {
    cursor: pointer;
  }
  .gfloris-menu .gfloris-menu-dropdown a {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .gfloris-menu-dropdown,
  .gfloris-menu input[type=checkbox] {
    display: none;
  }
  
  @media screen and (min-width: 1025px) {
    .gfloris-menu > label,
  .gfloris-menu input[type=checkbox] {
      display: none;
    }
  
    .gfloris-menu a {
      padding: 15px 20px;
    }
  
    .gfloris-menu > ul > li {
      display: inline-block;
    }
  
    .gfloris-menu-hasdropdown {
      position: relative;
    }
    .gfloris-menu-hasdropdown:hover > ul {
      display: block;
      animation: grow 0.5s ease-in-out;
    }
  
    .gfloris-menu-hasdropdown > ul {
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
    }
  
    .gfloris-menu-hasflyout > ul {
      left: 100%;
      top: 0;
    }
  
    .gfloris-menu-hasflyout .gfloris-menu-downicon {
      display: none;
    }
  
    .gfloris-menu {
      max-width: 1024px;
      margin: 0 auto;
    }
  }
  @media screen and (max-width: 1024px) {
    .gfloris-menu > ul,
    .gfloris-menu-righticon {
     display: none;
    }
  
    .gfloris-menu input[type=checkbox]:checked + ul {
      display: block;
      animation: grow 0.5s ease-in-out;
    }
  
    .gfloris-menu > label {
      background: white;
      display: block;
      padding: 15px 20px;
      text-align: right;
    }
  
    .gfloris-menu a {
      padding: 15px 20px;
    }
  
    .gfloris-menu > ul i {
      float: right;
      padding: 5px 10px;
      background: #d9d9d9;
    }
  
   ...