JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="lst_width">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

CSS

ul, li{list-style:none}
.lst_width>li{float:left;width:calc(100% / 7);height:50px;color:#fff;text-align:center}
.lst_width>li:nth-child(odd){background:#333}
.lst_width>li:nth-child(even){background:#999}