JSFiddle - React, Tailwind, and code Playground

HTML

<div class="catContainer">
<div class="container_12 hideInMobile">
<div class="grid_12 ">
<nav class="category">
<ul>
<li class=" node">
   <a href="/catalog/detskaya/">ДЕТСКАЯ</a><i></i>
   <ul>
      <li class="dropdown">
         <a href="/catalog/detskie-losiny-shorty/">Детские лосины, Шорты</a>
         <ul>
            <li><a href="/catalog/dzhinsovye/">Джинсовые</a></li>
            <li><a href="/catalog/detskie-kolgotki/">Детские колготки</a></li>
            <li><a href="/catalog/-bryuki-/"> Брюки </a></li>
            <li><a href="/catalog/cvetnye/">Цветные</a></li>
         </ul>
      </li>
      <li class="dropdown">
         <a href="/catalog/detskie-trusy/">Детские трусы</a>
         <ul>
            <li><a href="/catalog/dlya-devochki/">для девочки</a></li>
            <li><a href="/catalog/dlya-malchika/">для мальчика</a></li>
         </ul>
      </li>
      <li class="dropdown"><a href="/catalog/--detskie-losiny/">  Детские лосины</a>
      </li>
      <li class="dropdown"><a href="/catalog/--kolgotki/">  Колготки</a>
      </li>
      <li class="dropdown"><a href="/catalog/--korrektiruyushchee-belyo/"> Корр. бельё</a>
      </li>
      <li class="dropdown"><a href="/catalog/golfy-i-noski/">Гольфы и Носки</a>
      </li>
   </ul>
</li>

CSS

.catContainer {
    background: #6a7077;
    padding: 10px;
}
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}
.clearfix, .container_12 {
    zoom: 1;
}
.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
.container_12 .grid_12 {
    width: 1180px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
.category ul li {
    /* float: left; */
    display: inline-block;
    vertical-align: top;
}
li.node {
    float: left;
    width: 190px;
    color: white;
}
li.node a {
    color: #77e0c3;
    font-size: 16px;
    font-weight: bold;
}
.category ul ul {
    display: none;
    position: absolute;
    left: 0;
    background: #6a7077;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    right: 0;
    box-shadow: 0px 10px 20px 0px #454c56;
    z-index: 4;
}
.category ul ul li.dropdown {
    display: inline-block;
}
.category ul ul li {
    width: 10%;
    margin: 0 3%;
}
.category ul li {
    /* float: left; */
    display: inline-block;
    vertical-align: top;
}
.category ul ul a {
    text-transform: none;
    padding: 0 0 10px;
    line-height: normal;
    height: auto;
}
li.node a {
    color: #77e0c3;
    font-size: 16px;
    font-weight: bold;
}
.category ul ul ul {
    width: auto;
    position: static;
    display: block;
    box-shadow: none;
    padding: 0;
    border-top: 1px solid #ccc;
    margin-bottom: 35px;
}
.category ul ul {
    display: none;
    position: absolute;
    left: 0;
    background: #6a7077;
    width: 100%;
    text-align:...