JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul class="clearfix">
<li>текст1</li>
<li>текст2</li>
<li>текст3</li>
<li>текст4</li>
</ul>
</div>

CSS

div{
  text-align:center;
}
ul{
  list-style: none;
  display:inline-block;
}
li{
  width:200px;
  height:200px;
  margin:0 20px 20px 0;
  background:#fff;
  float:left;
}
.clearfix::after {
    display: block;
    content: '';
    clear: both;
}