JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<ul class="nav">
    <li class="nav-item"><a class="hav-href" href="#">item1</a></li>
    <li class="nav-item"><a class="hav-href" href="#">item2</a></li>
    <li class="nav-item"><a class="hav-href" href="#">item3</a></li>
    <li class="nav-item"><a class="hav-href" href="#">item4</a></li>
</ul>

CSS

.nav {
    background: black;
    text-align: justify;
    padding: 10px 20px;
}
.nav:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content: '';
    display: inline-block;
    
}
.nav-item {display: inline-block;}
.nav-href {color: white;}