JSFiddle - React, Tailwind, and code Playground

by ced1

HTML

<div id="container"><!-- flex container -->

    <div class="box"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box"><!-- flex item -->
        <p>DIV #2</p>
    </div>
    <div class="box"><!-- flex item -->
        <p>DIV #2 with text</p>
    </div>
    <div class="box"><!-- flex item -->
        <p>DIV #3</p>
    </div>

</div>

CSS

#container {
    display: flex; /* establish flex container */
        flex-direction: row; /* make main axis horizontal (default value) */
        justify-content: center; /* center items horizontally, in this case */
        align-items: center; /* center items vertically, in this case */
    height: 300px; /* for demo purposes */
    border: 1px solid black; /* for demo purposes */
    background-color: #eee; /* for demo purposes */
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* only important for multiple lines */

    padding: 0 20px;
    background-color: white;
    border: 2px solid blue;
}