JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

CSS

* {
  margin: 0;
  padding: 0;
}
ul {
  margin-top: 2em;
  display: flex;
  width: 100%;
  list-style: none;
}
li {
  flex: 1 1 100%;
  text-align: center;
  outline: 1px dashed;
}