JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div id="navigation" class="cf">
<ul>
  <li>
    Item 1
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li>
      <li>Item 1.3</li>
    </ul>
  </li>
  <li>
    Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ul>
  </li>
</ul>
</div>

CSS

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#navigation {
  background-color: #66f;
  color: white;
  min-width: 120px;
  width: 120px;
  height: 100%;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
ul li {
  line-height: 100px;
  border-bottom: 1px solid #888;
  padding-right: 10px;
  padding-left: 0;  
}
ul li ul li {
  line-height: 50px;
  background-color: #333388;
  border-bottom: 1px solid #888;
  text-align: left;
  padding-left: 10px;
  padding-right: 0;
}