JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="main-wraper">
<div class="sub-wraper">
<div class="box">AAA<div class="etiq"><label></label></div></div>
<div class="box">BBB<div class="etiq"><label></label></div></div>
<div class="box">CCC<div class="etiq"><label></label></div></div>
<div class="box">DDD<div class="etiq"><label></label></div></div>
<div class="box">EEE<div class="etiq"><label></label></div></div>
<div class="box">FFF<div class="etiq"><label></label></div></div>
<div class="box">GGG<div class="etiq"><label></label></div></div>
<div class="box">HHH<div class="etiq"><label></label></div></div>
<div class="box">III<div class="etiq"><label></label></div></div>
<div class="box">JJJ<div class="etiq"><label></label></div></div>
<div class="box">KKK<div class="etiq"><label></label></div></div>
<div class="box">LLL<div class="etiq"><label></label></div></div>
<div class="box">MMM<div class="etiq"><label></label></div></div>
<div class="box">NNN<div class="etiq"><label></label></div></div>
<div class="box">OOO<div class="etiq"><label></label></div></div>
<div class="box">PPP<div class="etiq"><label></label></div></div>
</div>
</div>

CSS

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Oswald);
.main-wraper {
	width:100%;
	background-color:#D2DFF3;
	position:absolute;
	text-align:center;
	vertical-align:middle;
	align-content:center;
}
.sub-wraper {
	background-color: #9CF;
	padding: 20px;
}
.box {
	width:100px;
	height:100px;
	border:solid;
	padding:15px;
	position:relative;
	display:inline-block;
	margin-left:10px;
	margin-top:10px;
}