JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container" id="cont">
<div class="centered">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile">...</div>
</div>
</div>
CSS
div.tile {
float: left;
background-color: #E5E4E5;
background-image: url("data:image/gif;base64,R0lGODlhBAAEAJEAAOfk59nX2czIzOXk5SH5BAAAAAAALAAAAAAEAAQAAAIHxCQzEaisCgA7");
background-repeat: repeat;
background-position: 0 0;
-moz-box-shadow: inset -5px 5px 5px #888, inset 0 -5px 5px #888;
-webkit-box-shadow: inset 0 5px 5px #888, inset 0 -5px 5px #888;
box-shadow: inset 0 -3px 8px #888, inset 0 3px 8px #888;
width: 150px; height: 150px;
text-align: center;
border-radius: 10px;
margin: 10px;
}
div.centered{
width: 682px;
margin: 0 auto;
}
div.container {
width: 800px;
border: 1px solid #555;
top: 10px;
left: 10px;
display: inline-block;
}