JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class='first'>first item</li>
    <li>second item</li>
    <li>3 item</li>
    <li>fourth item</li>
    <li class='last'>5 item</li>
</ul>

CSS

ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; text-align: center; }
ul li.last { float: right; text-align: right; }
ul li.first {text-align: left; }