JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

HTML

<div class="navigation">
    
</div>

<div class="main-content">
    <div class="inside-content">
        <div class="bolinha"></div>
    </div>    
</div>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html, body {
    min-height:100%;
    height:100%;
    margin:0;
    padding:0;
}

.navigation {
    width: 20%;
    height:100%;
    min-height:100%;
    background:#000;
    position:fixed;
    top:0;
    left:0;
}

.main-content {
    width:80%;
    height:100%;
    background:#b20000;
    position:absolute;
    top:0;
    right:0;
    padding:0.5%
}

.main-content .inside-content {
    width:100%;
    background:#fff;
    padding:10px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
}

.bolinha {
    width:50px;
    height:50px;
    position:fixed;
    z-index:1000;
    bottom:20px;
    right:20px;
    background:#00ff00;
}