JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<nav class="nav">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Hi</a>
    <a href="#">I like pizza.</a>
    <a href="#">A really really really long one</a>
    <a href="#">Yeah...</a>
</nav>

CSS

html, body {
    margin:0px;
    padding:0px;
}
html, body, .nav {
    height:100%;
}
.nav {
    background:#222;
    width:215px;
    margin:0px;
    padding:0px;
    overflow-x:hidden;
    overflow-y:auto;
}
.nav a {
    width:calc(100% - 10px);
    height:45px;
    background:#38e;
    color:white;
    text-decoration:none;
    display:block;
    padding-left:20px;
    line-height:45px;
}
.nav a:nth-of-type(even) {
    background:#1D6CCC;
}