JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav_bar">
    <div class="nav option1">
        <h2>Option 1</h2>
    </div>
    <div class="nav option2">
        <h2>Option 2</h2>
    </div>
    <div class="nav option3">
        <h2>Option 3</h2>
    </div>
</div>

CSS

#nav_bar {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    color: black;
    display: flex;
    flex-direction: row;
}

.nav {
    width: 100%;
    height: 50px;
    text-align: center;
    cursor: pointer;
}

/* option1 is selected by default */
.option1 {
    border-bottom: 2px solid #4387ff;
}

/* remove all borders when the parent is hovered */
#nav_bar:hover .nav {
    border-bottom: none;
}

/* add border to the hovered child */
#nav_bar .nav:hover {
    border-bottom: 2px solid #4387ff;
}