JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

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

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

</div>

CSS

#container {
    display: flex; /* establish flex container */
    justify-content: center; /* align items vertically, in this case */
    align-items: center; /* align items horizontally, in this case */
    height: 300px; /* for demo purposes */
    border: 1px solid black; /* for demo purposes */
    background-color: #eee; /* for demo purposes */
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

#bluebox { background: aqua; }
#redbox { background: red; }