JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="wrapper">
    <menu class="main-menu">
        <li>Home<i></i></li>
        <li>Product<i></i></li>
        <li>Contact<i></i></li>
    </menu>
    <section class="content">
        <header>
            <h1>Hello</h1>
        </header>
    </section>
</div>

CSS

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

.wrapper {
    width: 100%;
    min-height: 100%;
    background: #efefef;
    position: relative;
    -moz-box-shadow: inset -5px 5px 10px #000000;
    -webkit-box-shadow: inset 5px 5px 10px #000000;
    box-shadow: inset 0px 0px 3px #000000;
    overflow: hidden;
}

.wrapper .main-menu {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 30%;
    background: #4e4842;
    position: relative;
    z-index: 0;
}

.wrapper .main-menu button {
    display: block;
}

.wrapper .content {
    width: 100%;
    min-height: 100%;
    background: #fff;
    position: absolute;
    left: 30%;
    top: 0;
    z-index: 1;
}

.main-wrapper .content > header {
    background: orange
}