JSFiddle - React, Tailwind, and code Playground

by mkirkland616

HTML

<div class="left-pane">
    <div class="nav-drag">
        <div class="nav-collapse"><span class="open"></span></div>
    </div>
</div>

CSS

.left-pane {
    display: block;
    /* overflow: auto; */
    margin-left: 0px;
    /* top: 45px; */
    background-color: #252525;
    height: calc(100% - 45px);
    width: 240px;
    position: fixed;
    z-index: 1;
}
.nav-drag {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    background-color: #333333;
    width: 6px;
    height: 100%;
    position: fixed;
    left: 246px;
    /* cursor: e-resize; */
    transition: left .4s ease;
}
.nav-drag .transition {
    transition: left .4s ease;
}
.nav-drag .notransition {
    transition: none !important;
}
.nav-drag .nav-collapse {
    background-color: #333333;
    height: 150px;
    width: 16px;
    border-radius: 6px;
    top: 40%;
    position: inherit;
}
/* .nav-drag .nav-collapse span.open::before {
    content: '\25C0';
}
.nav-drag .nav-collapse span.close::before {
    content: '\25B6';
} */
/* .nav-collapse span {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
} */