JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-stack">
    <!-- six -->
    <li aria-haspopup="true">
        <a href="#">Блок 6</a>
        <div class="grid-container12">
            <div class="grid-column grid-column2">
                <ul>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                </ul>
            </div>
            <div class="grid-column grid-column2">
                <ul>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                </ul>
            </div>
            <div class="grid-column grid-column2">
                <ul>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                </ul>
            </div>
            <div class="grid-column grid-column2">
                <ul>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                </ul>
            </div>
            <div class="grid-column grid-column2">
                <ul>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                </ul>
            </div>
            <div class="grid-column grid-column2">
                <ul>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                    <li><a href="#">Тестовый элемент</a></li>
                </ul>
            </div>
   ...

CSS

/**/
 .sky-mega-menu, .sky-mega-menu * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    background: none;
}
/* level 1 */

/**/
 .sky-mega-menu {
    position: relative;
    z-index: 999;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    font-size: 0;
    line-height: 0;
    text-align: right;
}
.sky-mega-menu:after {
    content:'';
    display: table;
    clear: both;
}
.sky-mega-menu li {
    position: relative;
    display: inline-block;
    float: left;
    padding: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .1);
    border-right-width: 1px;
    font-size: 13px;
    line-height: 45px;
    text-align: left;
    white-space: nowrap;
}
.sky-mega-menu li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    color: #666;
    transition: background 0.4s, color 0.4s;
    -o-transition: background 0.4s, color 0.4s;
    -ms-transition: background 0.4s, color 0.4s;
    -moz-transition: background 0.4s, color 0.4s;
    -webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -9999px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    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 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
    content:'';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
}
.sky-mega-menu li > div:before {
    content:'';
    position: absolute;
    bottom: 100%;
    left: 24px;
    border-right: 5px solid transparent;
   ...