JSFiddle - React, Tailwind, and code Playground

HTML

<div class="products">
    <div>


        <p>one</p>
    </div>
    <div>

        <p>two</p>
    </div>
    <div>

        <p>three</p>
    </div>
    <div>

        <p>four</p>
    </div>
    <div>

        <p>five</p>
    </div>
    <div>

        <p>six</p>
    </div>
    <div>

        <p>seven</p>
    </div>
    <div>

        <p>eight</p>
    </div>
    <div>

        <p>nine</p>
    </div>
</div>

CSS

.products{
            display: -webkit-flex;
            -webkit-flex-flow: row;
            /*-webkit-justify-content: center;*/
        }
        .products > div{
            padding: 0 4em;
    border : solid;
        }

JavaScript

document