JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div class="menu">
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

SCSS

body {
  margin: 0;padding: 0;
}

$red: #D42F35;
.menu {
  * { margin: 0; padding: 0; }
  color: white;
  font-family: Lucida Grande;
  
  > ul {
    list-style-type: none;
    > li {
      background: $red;
      padding: 1rem;
      text-align: center;
      transition: .2s all;
      &:hover {
        background: darken($red, 4%);
      }
    }
  }
}