JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="menu_container">
<div id="login_container">
</div>
<ul id="list_container">
<li class="category_b">
<p>1</p>
</li>
<li class="category">
<p>2</p>
</li>
<li class="category_b">
<p>3</p>
</li>
<li class="category">
<p>4</p>
</li>
<li class="category_b">
<p>5</p>
</li>
<li class="category">
<p>6</p>
</li>
<li class="category_b">
<p>7</p>
</li>
<li class="category">
<p>8</p>
</li>
<li class="category_b">
<p>9</p>
</li>
<li class="category">
<p>10</p>
</li>
<li class="category_b">
<p>11</p>
</li>
<li class="category">
<p>12</p>
</li>
<li class="category_b">
<p>13</p>
</li>
<li class="category">
<p>14</p>
</li>
</ul><!-- list_container -->
</div>
</body>
CSS
body,html {
margin: 0;
height:100%;
}
body{
position:relative;
}
#menu_container {
background-color: #31393D;
width: 250px;
height: 100%;
left: 0;
overflow-y: auto;
overflow-x: hidden;
}
#login_container {
background-color: #282F33;
width: 250px;
height: 230px;
left: 0;
}
#list_container {
width: 250px;
height: 100%;
margin: 0;
padding: 0;
}
#list_container p {
left: 20px;
display: block;
position: relative;
font-size: 12pt;
margin: 16px 0 0 20px;
color: #cacaca;
}
#list_container li {
width: 250px;
height: 50px;
float: left;
display: block !important;
}
.category {
border-top: 2px solid #282F33;
background-color: #2C3438;
}
.category_b {
border-top: 2px solid #282F33;
background-color: #4e5254;
}