JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<ul>
  <li><a href="#item-1">item-1 item-1 item-1</a></li>
  <li><a href="#item-2">item-2</a></li>
  <li><a href="#item-3">item-3</a></li>
  <li><a href="#item-4">item-4</a></li>
  <li><a href="#item-5">item-5 item-5</a></li>
  <li><a href="#item-6">item-6</a></li>
</ul>

SCSS

ul{
  display: flex;
  justify-content:space-around;
  li{
    flex:1;
     background: #ccc;
    +li{
      margin: 0 0 0 10px;
    }
    a{
      display:block;
      text-decoration: none;
      color:#333;
      text-align: center;
      font-family: 'Roboto', sans-serif;
    }
  }
}