JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row menupartial">
    <div class="col-md-12">
        <ul class="nav nav-pills">
            <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
            <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
            <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
            <li><a href="#">Your Schedules</a></li>
            <li><a href="#">Your Messages</a></li>
            <li><a href="#">Your Groups</a></li>
            <li><a href="#">Your Friends</a></li>
        </ul>
    </div>
</div>

CSS

.menupartial {
        background-color: #16749F;
        opacity: .9;
        width: 100%;
    }
    .menupartial a {
        color: lightgrey;
        font-weight: bold; 
    }
    .nav-pills > li > a {
        border-radius: 0;
    }
    .nav-pills > li > a:hover {
        border-radius: 0;
        background-color: #16749F;
        color: white;
    }
    .nav-pills > li > a:active {
        border-bottom: 5px solid white;
    }