JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navcontainer">
    <ul class="liheight">
        <a href="#"><li class="liheight">Team Management</li></a>
        <a href="#"><li class="liheight">User Management</li></a>

    </ul>
</div>

CSS

#navcontainer ul {
    display: block;
    list-style-type: disc;
     padding-top:40px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}

#navcontainer ul li { 
    display: inline-block;
    height: 100px
    border:5px solid #009ddc;
    border-left: 5px solid #009ddc;
    border-right: 5px solid #009ddc;
    border-bottom:5px solid #009ddc;
    border-top:5px solid #009ddc;
    z-index: 0 !important;
    padding: 0;

}

#navcontainer ul li {
    background: #fff;
    color: #24387f !important;
}

#navcontainer ul a li {
    text-decoration: none;
    padding: .1em 1em;
    color: #24387f !important;
}

#navcontainer ul li:hover {
    color: #fff !important;
    background-color:  #009ddc;
}

.liheight {
   min-height: 50px;
}