JSFiddle - React, Tailwind, and code Playground

by Vince Aggrippino

HTML

<div class='page'>O1
    <div class="Parent">
        <div class="Child">a</div>
        <div class="Child">b</div>
        <div class="Child">c</div>
        <div class="Child">d</div>
    </div>
</div>


<div class='page'>O2
    <div class="Parent">
        <div class="Child">a</div>
        <div class="Child">b</div>
        <div class="Child">c</div>
        <div class="Child">d</div>
        <div class='br'></div>
        <div class="Child">e</div>
    </div>
</div>


<div class='page'>O3
    <div class="Parent">
        <div class="Child">a</div>
        <div class="Child">b</div>
        <div class="Child">c</div>
        <div class="Child">d</div>
        <div class="Child">e</div>
    </div>
</div>

CSS

.page {
    background: #a00;
    width:700px;
    margin: 20px;
}
.Parent {
    background: #ccc;
    border: 1px solid black;
    display: table;
    margin-left: auto;
    margin-right:auto;
}
.Child {
    float: left;
    width: 150px;
    height: 50px;
    background:red;
    margin: 5px;
}

.br {
        clear: both;
}