JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="slide-nav">
            <ul class="slider">
                <li class="selected">
                    <div>
                        <span class="heart"></span>
                        <div>
                            Get Started</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="price-tag"></span>
                        <div>
                            Get Results</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="star"></span>
                        <div>
                            Track & Engage</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="people"></span>
                        <div>
                            Features</div>
                    </div>
                </li>
            </ul>
        </nav>

CSS

.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
}
.slider
{
list-style: none;
height: 38px; 
text-align: center;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;

display: inline-block;
width: 150px;
}
.slider li div 
{
line-height: 31px; 
}
.slider li div div 
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;

}