JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul li{
  background-color: gray;
  padding: 10px;
}
ul li:hover{
  background-color: rgb(138, 138, 138);
}
@media screen and (min-width:488px) {
  ul{
    display: flex;
  }
  /* ul li{
    flex:2;
  } */
}

@media screen and (min-width:888px) {
  ul{
    display: flex;
  }

  ul li{
    flex:1;
  }
}