JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="grid">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
</div>

CSS

.container{
    width: 100%; 
    height:100%;
    background-color:#CCC;
    text-align:center;
}

.grid{
    background-color:#999; 
    display: inline-block;
    position:relative;
    width: 80%;
    border:1px solid black;
}

.grid a{
    display:inline-block; 
    height: 100px; 
    width: 100px; 
    background-color:#000;
    margin: 5px;
    /* float:left; */
}

.ghost{clear: both;}