JSFiddle - React, Tailwind, and code Playground

HTML

<div id="leftmenu">
    <ul id="sidenav">
        <li><a href="">Link 1</a>
        </li>
        <li><a href="">Link 2</a>
        </li>
        <li><a href="">Link 3</a>
        </li>
    </ul>
</div>

CSS

#leftmenu {
     float: left;
     width: 300px;
     margin: 10px 0 0 10px;
 }
 ul#sidenav {
     list-style-type: none;
     padding: 0;
     margin: 0;
 }
 ul#sidenav li {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

     border-radius: 5px;
     text-align: center;
     margin: 5px 0 5px 0;
     background: #898E95;
     font-size: 11pt;
 }
 ul#sidenav li a {
     width: 295px;
     text-align: center;
     line-height: 25px;
     text-shadow: 1px 1px 0px #283744;
     text-decoration: none;
     font-size: medium;
     font-weight: bold;
     color: #FFF;
     display: block;
    padding: 4px;
 }
 ul#sidenav li:hover {
     background-color: #E5ECF9;
 }
 ul#sidenav li a:hover {
     color: #5C5E64;
     text-shadow: none;
 }
 #contentright {
     margin-left: 320px;
     padding: 0 20px 0 20px;
 }