JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div>
  <ul>
    <li>item_1</li>
    <li>item_2</li>
    <li>item_3</li>
    <li>item_4</li>
    <li>item_5</li>
    <li>item_6</li>
  </ul>
</div>

CSS

div {
  width:700px;
  height:60px;
  position:relative
}
ul {
  display:table;
  table-layout:fixed;
  border-collapse:collapse;
  width:700px;
  height:50px;
  list-style:none;
  margin:0;
  padding:0;
  background:#e6e6e6
}
ul li {
  display:table-cell;
  border:1px solid red
}
ul:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 10px;
  background:url("http://picload.org/image/cwliori/schatten.png") repeat;
  position: absolute;
  bottom: 0;
  left: 0
}