JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pane">
    <div id="sidebar">
        <div id="logo">Logo</div>
        <ul id="list">
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
            <li>List Item 1</li>
        </ul>
    </div>
</div>

CSS

body{  border: 1px solid red; } 
#pane {height: 504px}
#sidebar { border: 1px dashed gray; width: 200px; height: 500px padding: 5px; background: lightyellow; }
#list { width: 200px; height: 400px; overflow: auto; } 
#logo {  border: 1px solid gray; height: 100px }
#list li { width:100%; height: 100px; border: 1px solid gray; }