JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="banner-div">

    </div>
    <div class="row">

        <div class="magnets">
            Some text
        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>

    <div class="row">

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>
</body>

CSS

html, body {
    background:#f8e4e4;
    font-family:'Bad Script';
    font-size:medium;
    text-align:center;

    width:100%;
}

.magnets {
    border:5px solid black;
    height:300px;
    width:300px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
    vertical-align: bottom;
}

.row {
    width:100%;
    margin-top:1%;
}