JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-block">
  <div class="center clearfix">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
  </div> 
</div>

CSS

.main-block{
  background: gray;
  height: 150px;
  padding-top: 50px;
  overflow: auto;
}

.center{
  margin: 0 auto;
  width: 500px;
  border: 1px solid;
}

.post{
  width: 100px;
  height:100px;
  background: blue;
  float: left;
  margin-right: 30px;
}

.post:last-child{
  margin-right: 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}