JSFiddle - React, Tailwind, and code Playground

HTML

<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;">
    <ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;">
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li>
    </ul>
</div>