JSFiddle - React, Tailwind, and code Playground

HTML

<section id="menu_categorias">
<div class="category_bar">
    <div class="container">

        <div class="row">

            <div class="col-md-5">
                <div class="menu_categorias">
                    <a href="#menu" id="toggle"><span></span></a>

                </div>
            </div>

        </div>

    </div>
</div>

<div id="menu">
    <div class="container">
        <div class="col-md-3 col_menu">
            <ul>
                <li>
                    <a href="#">CATEGORIA TESTE</a>
                    <ul class="submenu">
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
</div>

Fake content to show the slide

CSS

.category_bar {
    padding: 20px;
    padding-bottom: 10px;
    background-color: #274566;
}

.category_bar .menu_categorias span.cat{
    position: absolute;
    line-height: 43px;
    color: #ffffff;
    font-size: 25px;
    display: inline-block;
    margin-left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

#menu {
    height: 0;
    background-color: #274566;
    padding: 15px 15px 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.col_menu {
    border-right: 1px solid #eeeeee;
}

#menu ul{
    list-style: none;
    color:#ffffff;
}

    #menu ul li{
        margin: 5px 0;
        padding: 0 10px;
        margin-bottom: 15px;
    }

        #menu ul li a{
            color: #ffeb3b;
            text-decoration: none;
        }

        #menu ul.submenu{
            padding-left: 10px;
        }

        #menu ul.submenu li{
            margin-bottom: 5px;
        }

        #menu ul.submenu a{
            color: #ffffff;
        }

#toggle {
  display: inline-block;
  width: 28px;
  height: 30px;
  margin: 18px auto 10px;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #ffffff;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

JavaScript

var theToggle = document.getElementById('toggle');

            // based on Todd Motto functions
            // http://toddmotto.com/labs/reusable-js/

            // hasClass
            function hasClass(elem, className) {
                return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
            }
            // addClass
            function addClass(elem, className) {
                if (!hasClass(elem, className)) {
                    elem.className += ' ' + className;
                }
            }
            // removeClass
            function removeClass(elem, className) {
                var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
                        newClass = newClass.replace(' ' + className + ' ', ' ');
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                }
            }
            // toggleClass
            function toggleClass(elem, className) {
                var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(" " + className + " ") >= 0 ) {
                        newClass = newClass.replace( " " + className + " " , " " );
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                } else {
                    elem.className += '' + className;
                }
            }

            theToggle.onclick = function() {
                $('#menu').css({
                    height: $("#menu").get(0).scrollHeight,
                    opacity: 1,
                    marginBottom: '15px',
                    visibility: 'visible'
                });
                
                toggleClass(this, 'on');
                
                if...