JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b">
<div class="a">
    <div class="a2">1</div>
    <div class="a1">2</div>
    <div class="a1">3</div>
    <div class="a2">4</div>
    <div class="a1">5</div>
    <div class="a1">6</div>
</div>
</div>

CSS

.b {
  border: 1px solut #456213;
  width:100%;
	height:auto;
  align-content:center;
}
.a {
	width:auto;
	height:auto;
	align-content:center;
	margin: 20px auto 10px auto;
	}
.a1{
	border:#2A33CC solid 1px;
	height:200px;
	width:200px;
	float:left;
	}
	
.a2{
	border:#2A33CC solid 1px;
	height:200px;
	width:200px;
	float:left;
	}