JSFiddle - React, Tailwind, and code Playground

HTML

<section id="sidebar">
            <ul id="menubar">
                <li><a href="head.php">Head</a></li>
                <li><a href="body.php">Body</a></li>
                <li><a href="settings.php">Settings</a></li>
                <li><a href="">None</a></li>
                <li><a href="">None</a></li>
            </ul> <!-- menubar CLOSE -->
        </section>

<section id="settings">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente voluptatem deleniti sunt quos earum distinctio ea eaque dolore velit optio aliquid nihil quia qui dignissimos tempora dolorem. Voluptates voluptate.</p>
            
</section><div style='clear:both;'></div>

CSS

html, body {height:100%;}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}



section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}