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%; background-color:#CCC; text-align: center; }

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

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

.ghost{clear: both;}