JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="flex-list">
      <li class="li1">item1</li>
      <li class="li2">item2</li>
      <li class="li3">item3</li>
      <li class="li4">item4</li>
    </ul>

CSS

ul {
  list-style: none;
  margin: 0px;
  padding: 60px 0px;
  text-align: center;
}
li {
  color: white;
  height: 80px;
  line-height: 80px;
}
.li1 {
  background-color: #ffc562;
}
.li2 {
  background-color: #a0c3f7;
}
.li3 {
  background-color: #ff8db3;
}
.li4 {
  background-color: #88e7ce;
}

.flex-list {
  display: flex;
}
.flex-list li {
  flex: auto;
}

/* スマホ向けレイアウト */
@media (max-width:670px) {
  /* .flex-listにflex-directionを指定してください */
  .flex-list{
    flex-direction: column;    
  }
  .flex-list li{
    margin: 0 auto;
}
}