JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-inverse" role="navigation" id="azul">
            <div class="container-fluid">


                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <div class="conteudo"><li><a href="#">PAGINA PRINCIPAL</a></li></div> 

                        <div class="conteudo"> <li><a href="#">CONTATO</a></li></div>

                        <div class="dropdown">
                            <div class="conteudo" id="dropbtn"><li><a href="#">PRODUTOS</a></li></div>


                           
                        </div> 
                    </ul>

                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

CSS

.conteudo{
           margin-top:-10px;
            font-weight: 700;
            float:left;
            padding:10px;

        }
        
         #azul{
            background-color:#00008B; 
            height: 50px;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
        
         .nav navbar-nav .conteudo:hover{
            border-top: 3px solid white;
            border-bottom: 3px solid white;
            
                
            }