JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="slide-nav">
                <div id="slide-trigger">Click here <span>&#9660</span></div>
                <ul>
                    <li  class="active"><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>
                    <li><a href="#">Link4</a></li>
                </ul>
            </nav>

CSS

#slide-nav {
    position: fixed;
    display: inline-block;
    top: 100px;
    left: 0;
}

#slide-nav ul{
    padding:0;
    display:none;
}

#slide-nav ul li {
    position:relative;
    width: 100%;
    padding: 7px 20px;
}

#slide-nav ul li a {
    transition: all 0.3s;
}

#slide-nav ul .active a {
    color: rgba(0,0,0,.75);
}

#slide-nav ul .active:before{
        content: "";
        width: 15px;
        height: 1.5px;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 0;
}


#slide-trigger {
    font-size: 1.4em;
    cursor: pointer;
    margin: 20px 0;
}
#slide-trigger span {
    font-size: 0.8em;
}

JavaScript

$('#slide-trigger').on('click', function () {
        $('#slide-nav > ul').slideToggle(400, function () {
            $(this).toggleClass('showing');
        });
        $('#slide-trigger > span').animate({ 'transform' : 'rotateY(180deg)' });
    });