JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/75855864/css/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/75855864/css/jquery.mCustomScrollbar.min.css">
<div id="RCONT">
        <div id="RCONT_AVATAR"><img src="IMAGES/avatar.jpg" /></div>
        <div id="RCONT_ANAME">xxxxxx</div>
        <div id="RCONT_ALEVEL">xxxxxxx</div>
        <div id="RCONT_WALLET">xxxxxx</div>
        <div id="RCONT_LOGGEDACCOUNT">
            <div id="RCONT_LOGGEDACCOUNT_LIA">awdawd</div>
            <div id="RCONT_LOGGEDACCOUNT_SEPERATOR"></div>
            <div id="RCONT_LOGGEDACCOUNT_USER">awdawda</div>
            <div id="RCONT_LOGGEDACCOUNT_SERVER">awdawdawd</div>
            <div id="RCONT_LOGGEDACCOUNT_CHANGE">awdawd</div>
        </div>
        <div id="RCONT_MENU">
            <div class="click-nav1">
                <ul class="no-js">
                    <li style="border-top: 0.2vh solid rgba(69, 74, 84, 0.7);">
                        <a href="#" class="clicker1 clickeractive" id="link1" style="padding-top: 1vh;padding-bottom:1vh;"><i class="fa fa-share-alt" id="MYFEED_ICON"></i>SPAMCLICK HERE<i class="fa fa-angle-up" style="float: right;" id="MYFEED_ANGLE"></i></a>
                        <ul id="hej">
                            <li><a href="#" class="MYFEED_SLIDEOUT"><i class="fa fa-globe" style="padding-right:0.5vh;font-size:1.2vh;"></i>awdawd<i style="float: right;font-style:normal;padding-right:1vh;"><i class="fa fa-angle-right" id="slideout-menu-toggle"></i></i></a>
                                
                            </li>
                            <li><a href="#" class="MESSAGES_SLIDEOUT"><i class="fa fa-inbox" style="padding-right:0.5vh;font-size:1.2vh;"></i>awdawd</a>
                               
                            </li>
                            <li><a href="#" class="CHALLENGES_SLIDEOUT"><i class="fa fa-bolt" style="padding-right:0.5vh;font-size:1.2vh;"></i>awdawd</a>
 ...

CSS

#RCONT {
    height: 100%;
    width: 24.8vh;
    background-color: #373737;
    position: fixed;
    top: 8.33vh;
    font-family:'Segoe UI';
    box-shadow: 0px 0px .1vh 0px rgba(0, 0, 0, 0.5);
    z-index: -1;
    /*#373737;*/
}
#RCONT_AVATAR {
    position: absolute;
    top: 1vh;
    left: 1vh;
    width: 100%;  
}
#RCONT_AVATAR img {
    width: 6.5vh;
}
#RCONT_ANAME {
    font-family:my_fat_font;
    font-size: 1.2vh;
    color: white;
    position: relative;
    top: 2vh;
    left: 8.5vh;
}
#RCONT_ALEVEL {
    font-family:my_fat_font;
    font-size: 1.2vh;
    color: white;
    position: relative;
    top: 2.3vh;
    left: 8.5vh;
}
#RCONT_WALLET {
    font-family:my_fat_font;
    font-size: 1.2vh;
    color: white;
    position: relative;
    top: 2.6vh;
    left: 8.5vh;
}
#RCONT_LOGGEDACCOUNT_SEPERATOR {
    left: 1vh;
    top: 4vh;
    width: 22.8vh;
    border-bottom: 0.2vh solid rgba(69, 74, 84, 0.7);
    position: relative;
}
#RCONT_LOGGEDACCOUNT {
    width: 100%;
    font-size: 1.5vh;
    color: white;
    padding-top: 1vh;
}
#RCONT_LOGGEDACCOUNT_LIA {
    position: relative;
    top: 4vh;
    padding-left: 1vh;
    font-size: 1.3vh;
    color: #F25B00 !important;
}
#RCONT_LOGGEDACCOUNT_USER {
    position: relative;
    top: 4.8vh;
    padding-left: 1vh;
}
#RCONT_LOGGEDACCOUNT_SERVER {
    position: relative;
    top: 5vh;
    padding-left: 1vh;
    font-size: 1.2vh;
}
#RCONT_LOGGEDACCOUNT_CHANGE {
    color: #d8d8d8;
    height: 2.6vh;
    width: 4vh;
    text-align: center;
    position: relative;
    top: 1.35vh;
    left: 17.8vh;
    font-size: 1.2vh;
    background: #de8b25;
    background-image: -webkit-linear-gradient(top, #de8b25, #d6553e);
    background-image: -moz-linear-gradient(top, #de8b25, #d6553e);
    background-image: -ms-linear-gradient(top, #de8b25, #d6553e);
    background-image: -o-linear-gradient(top, #de8b25, #d6553e);
    background-image: linear-gradient(to bottom, #de8b25, #d6553e);
    -webkit-border-radius: 4;
   ...

JavaScript

$(document).ready(function () {
    $("#plistcontainer_working").mCustomScrollbar({
        scrollInertia: 0,
        mouseWheel: {
            scrollAmount: "56vh",
            snapAmount: "56vh",
            deltafactor: "56vh"
        },
        keyboard: {
            scrollAmount: "56vh",
            snapAmount: "56vh",
            deltafactor: "56vh"
        },
    });
})
$(function () {
    $('.click-nav1 > ul').toggleClass('no-js js');
    $('.clicker1').click(function (e) {
        $('.click-nav1 .js ul').toggleClass('vis1').slideToggle(200);
        $('.clicker1').toggleClass('active');
    });
    $('.clicker1').click(function () {
        if ($('.click-nav1 .js ul').is(':visible')) {
            $('.click-nav1 .js ul', this).slideUp();
            $('.clicker1').removeClass('active');
        }
    });
    $('.clicker1').click(function () {
        var dh = $('.click-nav1 .js ul').hasClass('vis1') ? "+=11.7vh" : "-=11.7vh";
        $("#plistcontainer_working").animate({ "height": dh }, 200);
        
    });
});

$(function () {
    $('.click-nav2 > ul').toggleClass('no-js js');
    $('.clicker2').click(function (e) {
        $('.click-nav2 .js ul').toggleClass('vis2').slideToggle(200);
        $('.clicker2').toggleClass('active');
    });
    $('.clicker2').click(function () {
        if ($('.click-nav2 .js ul').is(':visible')) {
            $('.click-nav2 .js ul', this).slideUp();
            $('.clicker2').removeClass('active');
        }
    });
    $('.clicker2').click(function () {
        var dh = $('.click-nav2 .js ul').hasClass('vis2') ? "+=7.2vh" : "-=7.2vh";
        $("#plistcontainer_working").animate({ "height": dh }, 200);
       
    });
});
$(function () {
    $('.click-nav3 > ul').toggleClass('no-js js');
    $('.clicker3').click(function (e) {
        $('.click-nav3 .js ul').toggleClass('vis3').slideToggle(200);
        $('.clicker3').toggleClass('active');
    });
    $('.clicker3').click(function () {
        if ($('.click-nav3 .js...