JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="wrapper">
        <ul class="myList">
            <?php for ( $i=0; $i<15; $i++ ) { ?>
            <div class="badass">
                <li>Something goes here....
                    <br>Then some more...
                    <br>Then something else...</li>
            </div>
            <?php } ?>
        </ul>
    </div>
</div>

CSS

ul {
                width: 100%;
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #wrapper {
                overflow: hidden;
                padding: 1.5em 0;
                margin: 0 auto;
                max-width: 90%;
            }
            .myList li {
                display: inline-block;
                text-align: left;
                padding: 0.6em;
            }
            .badass {
                text-align: center;
                display: block;
                width: 16em;
                height: 9em;
                background: #BADA55;
            }