JSFiddle - React, Tailwind, and code Playground

HTML

<!-- EXAMPLE 1 -->
<div class="example example1">
    <nav>
        `nav` looks the same as
    </nav>
    
    <!-- <nav> visually the same as <div> -->
    
    <div>
        as `div`
    </div>
</div>




<!-- EXAMPLE 2 -->
<div class="example example2">
    <!-- the nav tag around the ul is 
    there just to add semantic meaning
    -->
    <nav>
        <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="#link3">Link 3</a></li>
        </ul>
    </nav>
    
    <!-- as we sawy above, visually the
    nav adds nothing.  -->
    <ul>
        <li><a href="#link1">Link 1</a></li>
        <li><a href="#link2">Link 2</a></li>
        <li><a href="#link3">Link 3</a></li>
    </ul> 
</div>



<!-- EXAMPLE 3 -->
<div class="example example3">     
        <!-- Horizontally center the links-->
        <ul class="h-centered-list">
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link1">Link 2</a></li>
            <li><a href="#link1">Link 3</a></li>
        </ul>
</div>

CSS

.example {
    margin-bottom: 50px;
}

/********
EXAMPLE(1): nav and div visually the same
*********/

.example1 nav, 
.example1 div{
    height: 50px;
    margin-bottom: 10px;
    background: gold;
}


/*******
EXAMPLE(2): so, as expected, putting <nav> 
around an <ul> does nothing
*******/

.example2 ul {
    background: lightblue;
    margin-bottom: 10px;
}

/******
EXAMPLE(3): horizontal list of links/buttons
            using display: inline-block;
            with floats it would be more difficult 
            to achieve the centering. display: inline-block
            is sexier anyway.
*******/

.example3 .h-centered-list {
   padding: 10px 0;
   background: indianred;
   font-size: 0; /*to eliminate white-space 
                    between links. leave it up for margin*/
   text-align: center;
       
}

.example3 .h-centered-list li {
    display: inline-block;
    vertical-align: top;
    font-size: 16px; /*override set font-size on parent*/
    margin-right: 6px; /*6px between links*/
}