JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap main">

    <div class="grid">

        <article class="box article">
            <header class="clearfix">
                    1
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    2
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    3
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    4
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    5
            </header>
        </article>

        <article class="box article">
            <header class="clearfix">
                    6
            </header>
        </article>

    </div> <!-- END .grid  (Content) -->

</div>

CSS

.grid {
    width:370px;
}

article.one {
   border:solid thin #ccc;
    margin:10px;
    width:100px;
    height:100px;
    float:left;
}
.two{
    border:solid thin #ccc;
    margin:10px;
    width:100px;
    height:100px;
    float:left;
}
.three {
    border:solid thin #ccc;
    margin:10px;
    width:100px;
    height:100px;
    float:left;
}
.four {
    border:solid thin #ccc;
    margin:10px;
    width:100px;
    height:100px;
    float:left;
}
.five {
    border:solid thin #ccc;
    margin:10px;
    width:100px;
    height:100px;
    float:left;
}
.six {
    border:solid thin #ccc;
    margin:10px;
    width:100px;
    height:100px;
    float:left;
}