JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
      <li><a class="float" href="#">Link five</a></li>
      <li><a href="#">Link six</a></li>
      <li><a href="#">Link seven</a></li>
    </ul>

CSS

ul {
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a {
        width:6em;
        text-decoration:none;
        color:black;
      }

.float {float:right;}