JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">

            <div class="inner">

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="clearboth">
                </div>

            </div>

        </div>

CSS

div.outer {
    text-align: center;
}

div.inner {
    display: inline-block;
    width: auto;
}

div.floatdiv {
    display: block;
    float: left;
    width: 270px;
    height: 400px;
    margin: 5px;
    background-color: Gray;
    text-align: center;
}

div.clearboth {
    clear: both;
}