JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="anchors">
    <ul>
        <li><a href="#features" class="active">Features</a></li>
        <li><a href="#plans">Plans</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#resources">Resources</a></li>
    </ul>
</nav>

<nav class="anchors">
    <ul class="two">
        <li><a href="#features" class="active">Features</a></li>
        <li><a href="#plans">Plans</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#resources">Resources</a></li>
    </ul>
</nav>

<nav class="anchors">
    <ul class="three">
        <li><a href="#features" class="active">Features</a></li>
        <li><a href="#plans">Plans</a></li>
    </ul>
</nav>

SCSS

.anchors {
    width: 100%;
    max-width: 800px;
    background: silver;
}
.anchors ul {
    display: flex;
    padding: 0;
    list-style: none;
    justify-content: space-evenly;
}

.anchors ul.two {
    justify-content: center;
    
    padding-left: 6.9%;
    padding-right: 6.9%;
}
.anchors ul.two li {
  margin: 0 2rem; 
 }

.anchors ul.three {
    justify-content: space-between;
    padding-left: 14.3%;
    padding-right: 14.3%;
}