JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Bad+Script|Architects+Daughter|Comfortaa|Handlee"></script>
<div id="banner-div">

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

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


            <br/>
            <br/>
             Some text Some text   Some text 
             Some text 
             Some text  Some text 
             Some text  Some text  Some text 
             Some text 


            <br/>
            <br/>

        </div>

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


            <br/>
            <br/>
Some text   Some text 
             Some text 
             Some text  Some text 
             Some text  Some text  Some text 
             Some text 


            <br/>
            <br/>
Some text   Some text 
             Some text 
             Some text  Some text 
             Some text  Some text  Some text 
             Some text 


            <br/>
            <br/>

        </div>

        <div class="magnets">

        </div>
    </div>

    <div class="row">

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>

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;
    overflow:hidden;
   
}

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