JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<nav>
  <ul>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
  </ul>
</nav>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales vitae ligula in bibendum. Nulla non congue odio. Donec nisi quam, tincidunt sit amet commodo non, faucibus in nisl. Etiam pellentesque tortor et maximus aliquam. Vivamus molestie eget mauris eget feugiat. Donec imperdiet eu sapien eu porta. Nulla posuere eleifend augue sed mollis. Praesent molestie sem at tellus consectetur vestibulum. Aliquam erat volutpat. Mauris et quam ac tellus aliquet efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis at velit et dolor porttitor ultrices sed id leo. Etiam est turpis, sagittis sed sapien eu, ullamcorper hendrerit neque. Pellentesque sed eros mi.
</p><p>
Nam augue mi, sodales sit amet diam tincidunt, pretium fringilla dolor. Vivamus sagittis risus id neque pretium, in eleifend purus efficitur. Maecenas vel dignissim leo. Aliquam suscipit malesuada eros, ac vulputate nisl facilisis id. Suspendisse sagittis, massa ac bibendum ornare, sapien augue finibus justo, a pulvinar ante ipsum et leo. Maecenas finibus pretium consectetur. Donec mollis risus ut nulla tempor, aliquam eleifend odio condimentum. Sed eleifend venenatis arcu at ultrices. In pharetra non massa eu venenatis. Phasellus sed purus in urna imperdiet tincidunt id nec ante. Sed congue quam at odio dignissim varius.
</p><p>
Praesent varius eros lacus, non mollis turpis tincidunt in. Nunc posuere accumsan lectus, eu vulputate neque volutpat et. Nullam nulla elit, rutrum vehicula ultricies ac, dictum sed justo. Integer tempor metus faucibus urna dignissim, a volutpat augue finibus. Nam egestas eu neque a posuere. Orci varius natoque penatibus et magnis dis parturient montes,...

CSS

body,
ul {
  margin: 0;
  padding: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  overscroll-behavior: none;
  width: 300px;
  background: tomato;
  height: 100vh;
}

nav li {
  list-style: none;
}

nav li a {
  display: block;
  padding: 10px;
  text-align: center;
  color: currentColor;
  text-decoration: none;
}