JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="item1">
    block 1
  </li>
  <li class="item2">
    bloc 2
  </li>
  <li class="item3">
    block3
  </li>
  <li class="item4">
    block4
  </li>
  <li class="item5">
    block5
  </li>
  <li class="item6">
    block6
  </li>
</ul>

CSS

ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  width:300px;
}
li{
  width:29%;
  display: inline-block;
}
.item1{
  outline: 3px solid red ;
}
.item2{
  outline: 3px solid green ;
  height:50px;
}
.item3{
  outline: 3px solid black ;
}
.item4{
  outline: 3px solid pink ;
}
.item5{
  outline: 3px solid orange ;
}
.item6{
  outline: 3px solid grey ;
  height:100px;
}