JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
    <link rel="stylesheet" href="./styles/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta charset="UTF-8">
    <title>idk</title>
</head>
<body>
    <div id="navbar">
        <div class="collapse-menu-trigger">
            <i class="material-icons icon-def">keyboard_arrow_right</i>
            <i class="material-icons icon-inuse">keyboard_arrow_left</i>
        </div>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
    background: red;
}

#navbar{
    background: rgb(16,16,16);
    color: white;
    width: 70px;
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    border-right: rgb(246,246,255) 1px solid;
}

.collapse-menu-trigger{
    display: block;
    width: 70px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    bottom: 0;
    cursor: pointer;
}

.collapse-menu-trigger .material-icons{
    vertical-align: middle;
}

.collapse-menu-trigger .material-icons.icon-def{

}

 .collapse-menu-trigger .material-icons.icon-inuse {
     display: none;
}