JSFiddle - React, Tailwind, and code Playground

by Loxos

HTML

<div class="sidebar">
    <div class="sidebar-content">
        <div class="filter">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAC0klEQVR4Xu1bW1LCMBS9Af/tDsQViBuAsgLdgTCCv+gKxB3Ir+AAO9AVALoAcQe4g/qPxBvHMuVVkrRJ0zadYUbGpM05Offm3IQSwOv5zakvl9AmBMrse9YvSmFWKED3uuINSe/dcckSxlkHvQsfLUCN9KfOEP95lUcCEPPIEpD7EPCTICaGQZ7CABN+4y8J+qAxFzzi3+2ckNBtVr1bhnVFAPuSk4Q4QvB1f6LXCMgBCWvgtxTgs9KbOhNkppqlcKAA01bVczcxbSmANRiMHeeHwAQD5CwTJFD4LFJwGzXP4yIgUySEgN8bAj5L/0qYoRJOUqkECl848+VdM783CW4CfRo7ZVwzJ/g5ThMJ6Gu+8ePe1LxZ2Lh35oC0k8AL/mAIBIlIixJEwAsRwBqzfQPTLbNvcXnDlSsEgjczmQRR8MIK8IkwkQQZ8NIEGGiZV8UNr/S5l8GwGxpSPG35exEShHPA5s0TJiES+EghECSiP3GYW9RbN6DFbbpe5F3syApIpG444O+1hsBG3aC+gowRfGwhECRhQWCuqm5gLu+IQimsuBGZ/dgJYDdUZZlFLS4vEbHkANXFkyrwShTgk8GUgOdvH7wzEdYOzy3PD5W1ss9RooA4LbOsxeUlRCkBbBC4wdrBh9zzDijYDjcyH3AjsyPTl7ePcgLYQNAozYW31XA7C41OiReIbDstBKAKXvBBFyKDxNl/xdm/FOkj01YXAcJhoEP+SleB4GzI5AFLgIYEaBWADNgcIJM5RfvYHCBhhmwStElQvQ22q4BdBewyaH2ANUKipkamvTVC1giJb4tZJ2idYM6dYHEJp3gENpdJuiJ9jFwGVZ8FBAkykYDIP3pIswK0gjerGoz53J9XBWaEQELgjVCAyqNvHhUkrgCVR9/GE6BzudtHRmIKoATuWhWPvaqX6JUUAdqXu0QVwF69WRSAHZGzN9Gkf9erQiq/GG2mxsraijcAAAAASUVORK5CYII=" />Filter</div>
        <div class="settings">
            <img...

CSS

html, body {
    height:100%;
    position:relative;
    margin:0;
}
.sidebar {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    height:100%;
    background-color:#505050;
    width:100px;
    color:white;
    box-shadow: 1px 3px 1px 1px rgba(0, 0, 0, 0.4);
    z-index:100;
}
.sidebar-content {
    position:relative;
    background-color:#505050;
    width:100%;
    height:100%;
    z-index:1000;
    padding:0px;
}
.sidebar img {
    margin-top:20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:15px;
    width:50px;
}
.content {
    margin-left:100px;
    position:relative;
    height:100%;
}
.detail {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:#5DA9E9;
    min-height:50px;
}
.graph {
    position:relative;
    background-color:#D7E8BA;
    height:100%;
    z-index:-1;
    padding-left:20px;
}
.sidebar:after {
    content:"";
    position: absolute;
    top: 20px;
    left: 100%;
    z-index: 1000;
    border-top: 25px solid #505050;
    border-left: 25px solid transparent;
    border-bottom: 25px solid transparent;
    transform-origin: 0 0;
    transform: rotate(45deg);
    box-shadow: 1px 3px 1px 1px rgba(0, 0, 0, 0.4);
    z-index:100;
}
.detail:before {
    content:"";
    position:absolute;
    right:50px;
    top:0;
    border-left: 20px solid transparent;
    border-top: 20px solid #D7E8BA;
    border-right: 20px solid transparent;
}


.filter, .settings{
    padding:0px 15px 15px 15px;
}