JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<body>
<ul id="flex-container">
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  </ul>
</body>

CSS

ul {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  border: 1px solid red;
  height: 300px;
  align-items: center;
}
ul li {
   height: 50px;
  padding: 20px;
  list-style:none;
  background-color: red;
  width: 100px;
}

li:first-child {
  background-color: green;
}

li:nth-child(2){
  background-color: yellow;
}

li:nth-child(3){
  background-color: pink;
}

li:nth-child(4){
  background-color: purple;
}