JSFiddle - React, Tailwind, and code Playground

by tracyfu

HTML

<ul id="progress">
  <li id="li_pers" runat="server" class="nav">1. some text</li>
  <li id="li_bew" runat="server" class="nav">2. more text</li>
  <li id="li_anl" runat="server" class="nav">3. and more</li>
  <li id="li_ueb" runat="server" class="nav">4. and somewhat more because of long words</li>
</ul>

CSS

ul#progress {
  list-style: none;
  margin-bottom: 2px;
  padding: 0;
  display: table;
  float: left;
  width: 790px;
}

ul#progress li {
  display: table-cell;
  line-height: 20px; 
  padding: 5px 9px;
  background-color: #EBEBEB;
  width: 176px;
}

ul#progress li#li_ueb {
  width: 262px;
}

ul#progress li.selected {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #FF8040!important;
}