JSFiddle - React, Tailwind, and code Playground

HTML

<div id="PFcontainer">
                <div id="PFcontainer_inner">
                    <div id="pfcontainer_inner_phead"><a href="#" id="pfcontainer_inner_phead_clicker">Party<i class="fa fa-angle-up"></i></a></div>
                    <div id="pfcontainer_inner_phead_slider">
                        <div id="pfcontainer_inner_plist">
                            <ul>
                                <li><i class="fa fa-circle pfcontainer_inner_plist_active"></i>3lakhat</li>
                                <li><i class="fa fa-circle pfcontainer_inner_plist_offline"></i>AnderZEN1</li>
                                <li><i class="fa fa-circle pfcontainer_inner_plist_active"></i>mon3ym4k3r</li>
                                <li><i class="fa fa-circle pfcontainer_inner_plist_inactive"></i>eliseop</li>
                            </ul>
                        </div>
                        <div id="pfcontainer_inner_pcontrols">
                            <div id="pfcontainer_inner_pcontrols_btn1">btn1</div>
                            <div id="pfcontainer_inner_pcontrols_btn2">btn2</div>
                            <div id="pfcontainer_inner_pcontrols_btn3">btn3</div>
                            <div id="pfcontainer_inner_pcontrols_btn4">btn4</div>
                        </div>
                    </div>
                    <div id="pfcontainer_inner_friends">
                        <div id="pfcontainer_inner_fhead">Friends<input type="text" name="searchfriends" id="pfcontainer_inner_fheadsearch" placeholder="search" /></div>
                        <div id="pfcontainer_inner_fuppercontrols">
                    </div>    
                    </div>
                    <div id="pfcontainer_inner_flist">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div

CSS

#PFcontainer {
    width: 24.8vh;
    font-family: my_fat_font;
    font-size: 1.6vh;
    float: left;
    z-index:5;
    height: 65vh;
}
#PFcontainer_inner {
    background-color: #F2F2F2;
    height: 100%;
    padding-left: 1vh;
}
.pflink_container_active {
    color: #F25B00 !important;
}
#pfcontainer_inner_phead {
    padding-top: 1vh;
    border-bottom: 1px solid rgba(0,0,0,.15);
    width: 22.8vh;
}
#pfcontainer_inner_phead a {
    text-decoration: none;
    color: #F25B00;
}
#pfcontainer_inner_phead i {
    float: right;
    font-size: 1.4vh;
    height: 1.3vh;
    position: relative;
    top: .25vh;
}
#pfcontainer_inner_plist ul li {
    list-style: none;
    font-family: 'Segoe UI';
    line-height: 2vh;
    font-size: 1.5vh;
}
#pfcontainer_inner_plist ul {
    padding-left: 0;
    margin-top: .6vh;
    margin-bottom: .6vh;
}
#pfcontainer_inner_plist ul li i{
    padding-right: 1vh;
    font-size: .8vh;
    height: 1.35vh;
    vertical-align: middle;
}
.pfcontainer_inner_plist_active {
    color: #48ef55;
}
.pfcontainer_inner_plist_inactive {
    color: #e1a92e;
}
.pfcontainer_inner_plist_offline {
    color: #bc3636;
}
#pfcontainer_inner_pcontrols {
    width: 22.8vh;
    height: 5.7vh;
}
#pfcontainer_inner_pcontrols_btn1, #pfcontainer_inner_pcontrols_btn3 {
    font-size: 1.5vh;
    background-color: #FF9F2D;
    color: white;
    margin-top: 0.5vh;
    width: 10.4vh;
    text-align: center;
    margin-right: 1vh;
    float: left;
}
#pfcontainer_inner_pcontrols_btn2, #pfcontainer_inner_pcontrols_btn4 {
    font-size: 1.5vh;
    background-color: #FF9F2D;
    color: white;
    margin-top: 0.5vh;
    width: 10.4vh;
    text-align: center;
    float: left;
    margin-left: 1vh;
}
#pfcontainer_inner_fhead {
    color: #F25B00;
    padding-top: 1vh;
    border-bottom: 1px solid rgba(0,0,0,.15);
    width: 22.8vh;
    float: left;
}
#pfcontainer_inner_fheadsearch {
    float: right;
    width: 10vh;
    position: relative;
    font-size: 1.3vh;
    top:...

JavaScript

$(document).ready(function () {
    $("#pfcontainer_inner_phead_clicker").click(function () {
        if ($("#pfcontainer_inner_phead_slider").is(":visible")) {
            $("#pfcontainer_inner_phead_slider").hide("slide", { direction: "up" }, 200);
        }
        else {
            $("#pfcontainer_inner_phead_slider").toggle("slide", { direction: "up" }, 200);
        }
    })
})