JSFiddle - React, Tailwind, and code Playground

by Amr Noman

HTML

<ul id="bar">
  <li class="foo">Foo 1</li>
  <li class="foo">Foo 2</li>
  <li class="foo">Foo 3</li>
  <li class="foo">Foo 4</li>
</ul>

CSS

* {
  box-sizing: border-box;
}
#bar
{
  margin: auto;
  width: 50%;
  height: 30px;
  padding: 0;
  background: lightgrey;
  text-align: center;
}

.foo
{
  line-height: 30px;
  float: left;
  width: 25%;
  list-style: none;
  /* box-shadow: 0 0 0 1pt black; */
  border-top: 1px black solid;
  border-left:1px black solid;
  border-bottom: 1px black solid;
}

.foo:last-child {
  border-right: 1px black solid;
}