JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sky-mega-menul sky-mega-menu-pos-left anim">

  <li>
    <ul>

      <li aria-haspopup="true"  class="parent">
        <a href="" title="">Категория 5654654654</a>
        <div class="grid-container3">
          <ul>

            <li>
              <a href="" title="">Категория 5654654654</a>
              <ul>
                <li><a href="" title="">Категория 5654654 54654</a></li> 
                <li>
                  <a href="" title="">Категория 56546 55454 4654</a>
                  <ul>
                    <li><a href="" title="">Категория 56546 546 54</a></li>
                    <li><a href="" title="">Категория имимсисм апвапв</a></li>
                    <li><a href="" title="">Категория имимс65464исм апвапв</a></li>
                  </ul>

                </li>

                <li>
                  <a href="" title="">Категория 5654656 465 4654</a>
                  <ul>
                    <li><a href="" title="">Категория 56545455465 4654</a></li>
                    <li><a href="" title="">Категория 565 465 454543534654</a></li>
                    <li><a href="" title="">Категория 56545 454555465 4654</a></li>
                  </ul>

                </li>
                <li><a href="" title="">Категория 565 65465454 454544</a></li>
              </ul>

            </li>
            <li><a href="" title="">Категория 5653453</a></li>

            <li>
              <a href="" title="">Категория 56554454656 465 4654</a>
              <ul>
                <li><a href="" title="">Категория 565 444656 465 4654</a></li>
                <li><a href="" title="">Категория 565445434</a></li>
                <li><a href="" title="">Категория 564545 87774</a></li>
              </ul>

            </li>
            <li><a href="" title="">Категория 565 4544656 465 4654</a></li>

            <li>
              <a href="" title="">Категория 56554544656 465 4654</a>
              <ul>
                <li><a href="" title="">Категория...

CSS

.sky-mega-menul,
.sky-mega-menul * {
  padding: 0;
  outline: none;
  margin: 0;
}
.sky-mega-menul {
  position: relative;
  z-index: 9999;
  font-size: 0;
  text-align: right;
  font-family: 'Arial', sans-serif;
  -webkit-transition: -webkit-box-shadow 0.5s ease;
  transition: -webkit-box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease, -webkit-box-shadow 0.5s ease;
}
.sky-mega-menul:hover {
  -webkit-box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
          box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}
.sky-mega-menul li {
  position: relative;
  float: left;
  font-size: 12px;
  text-align: left;
  display: block;
  white-space: normal;
  font-weight: 400;
}
.sky-mega-menul li a {
  border: 1px solid #E4E4E4;
  color: #3D3D3D;
  margin-bottom: -1px;
  background: #fff;
  line-height: 15px;
  font-weight: 400;
  padding: 12px 35px 12px 20px;
  display: block;
  width: 214px;
}
.sky-mega-menul li > div {
  position: absolute;
  z-index: 9000;
  top:100%;
  left: -9999px;
  opacity: 0;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  -o-transition: -o-transform 1.0s, opacity 1.0s;
  -ms-transition: -ms-transform 1.0s, opacity 1.0s;
  -moz-transition: -moz-transform 1.0s, opacity 1.0s;
  -webkit-transition: -webkit-transform 1.0s, opacity 1.0s;
}
.sky-mega-menul li:hover > div{
top: 0;
left: 271px;
opacity: 1;
-webkit-transform: translate(0, 0);
background: #fff;
border-left: 8px solid #7D7E7F;
padding: 20px 20px 13px 20px;
width: 881px;
min-height: 488px;
max-height: 800px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.grid-container3 > ul {
width: 800px;
-webkit-column-count: 3;
column-count: 3;
}
.sky-mega-menul li.parent > a {
  background: url(/media/images/arrow-down.png) right center no-repeat, #fff;
  cursor: pointer;
}
.sky-mega-menul li.parent > a:hover{
  background: url(/media/images/arrow-down1.png) right center...