JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<div class="card-panel grey lighten-5">
    <div class="flex-container">
        <div>
            <div class="card-panel white-text blue lighten-2">
                <h5>Some text</h5>
            </div>
            <div class="card-panel">
                <h1 class="blue-text text-lighten-2">TEXT</h1>
            </div>
        </div>
        <div>
            <div class="card-panel white-text blue lighten-2">
                <h5>Some text</h5>
                <h6>(and some more text)</h6>
            </div>
            <div class="card-panel">
                <h5 class="blue-text text-lighten-2 left-align">some</h5>
                <h2 class="blue-text text-lighten-2 center-align">More</h2>
                <h5 class="blue-text text-lighten-2 right-align">text</h5>
            </div>
        </div>
        <div>
            <div>
                <div class="card-panel white-text blue lighten-2">
                    <h5>Some text</h5>
                    <h6>(and some more text)</h6>
                </div>
            </div>
            <div class="card-panel">
                <h4 class="blue-text text-lighten-2 center-align">
                    This text doesn't matter stop reading it!
                </h4>
            </div>
        </div>
    </div>
</div>

CSS

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0;
}

.flex-container div {
    width: 30%;
    margin: 1%;
    text-align: center;
    min-width: 220px;
}