JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
        <div class="page">
            <ul id="nav" class="sf-menu">
                <li class="level0 level-top parent first"><a href="#" target="_self" class=" level-top "><span>Category 01</span></a>
                    <ul class="level0   ">	
                        <li class="level1 first  "><a href="#" target="_self" class=""><span>cabelos</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>olhos</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>lábios</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>corpo</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>pescoço</span></a></li>
                        <li class="level1 first last  last-col"><a href="#" target="_self" class=""><span>unhas</span></a></li>
                    </ul>
                </li>
                <li class="level0 level-top parent mega-pos-01"><a href="#" target="_self" class=" level-top "><span>Category 02</span></a>
                    <ul class="level0 megamenu mega-wFull mega-col6">
                        <li class="level1 parent first  "><a href="#" target="_self" class=" "><span>subcategoria 01</span></a>
                            <ul class="level1   ">
                                <li class="level2 first last  "><a href="#" target="_self" class=""><span>face</span></a></li>
                            </ul>
            
                        </li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 41</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 02</span></a></li>
                        <li class="level1  "><a href="#" target="_self" class=""><span>subcategoria 03</span></a></li>
                        <li...

CSS

* { margin:0; padding:0; }
html { height: 100%; width: 100%; }
body { font-size:13px; color:#777; text-align:center; min-width:250px; position:relative; }
body > .wrapper { position:relative; }
.page { margin: 0 auto; padding: 0 0 0; text-align: left; width: 900px; }

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { position: relative; float: none; width: 100%; display: table; font-family: Tahoma, Helvetica, Arial, sans-serif; }
.sf-menu li { position: relative; -webkit-transition: background .2s; -moz-transition: background .2s; -o-transition: background .2s; transition: background .2s; }
.sf-menu ul { position: absolute; padding-top: 15px; padding-bottom: 15px; display: none; top: 100%; left: 0; z-index: 99; min-width: 12em; }
.sf-menu li.last > ul { left: inherit; right:0; }
.sf-menu > li { float: none; display: table-cell; }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }
.sf-menu a { display: block; position: relative; zoom: 1; }
.sf-menu ul ul { top: 0; left: 100%; }

/*** Default Skin ***/
#menu-icon, .sf-menu-phone, .sf-menu-block { display: none; }
.sf-menu { border:1px solid #ddd; border-bottom-color:#b0afaf; background:#e4e5e6; box-shadow:0 3px 6px rgba(0,0,0,0.08); }
.sf-menu > li { border-right: 1px solid #ddd; vertical-align: middle; }
.sf-menu > li:last-child { border-right: 0; }
.sf-menu > li:last-child > ul ul { left: auto; right: 100%; }
.sf-menu li a { color: #333; text-decoration: none; padding: 0; }
.sf-menu > li > a > span { display: block; font-size: 1.4em; line-height: 18px; cursor: pointer; padding: 18px 5px; text-align: center; }
.sf-menu li ul a span { white-space: normal; }
.sf-menu > li.parent > a span { margin-right: 0; }
.sf-menu > li.sfHover > a, 
.sf-menu> li > a:hover, 
.sf-menu > li.active > a { background: #fff; color: #000; }
.sf-menu ul { background-color: #FFF; border-top:5px solid #515151; box-shadow:0 4px 10px 0 rgba(150, 150, 150, 1); }
.sf-menu > li > a:before, 
.sf-menu...