JSFiddle - React, Tailwind, and code Playground

HTML

<h2>case1</h2>
<div class="case1">
    <nav>
        <ul class="clearfix">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </nav>
</div>

<h2>case2</h2>
<div class="case2">
    <nav>
        <ul class="clearfix">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </nav>
</div>


<h2>case3</h2>
<div class="case3">
    <nav>
        <ul class="clearfix">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </nav>
</div>

CSS

/* base */
nav {
    border: dotted 1px #FED;
    background: #DAD;
    margin: 15px 15%;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    float: left;
    border-radius: 7px;
    background: white;
    padding-right: 7px;
    padding-left: 7px;
    margin-right: 7px;
    margin-left: 7px;
}

li:hover {
    background: #FED;
}

a {
    text-decoration: none;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

/* case1 */
.case1 nav {
    height: 100px;
}

.case1 ul {
    margin-top: 35px;
    border: solid 3px #BAD;
}

/* case2 */
.case2 nav {
    height: 100px;
    position: relative;
}

.case2 ul {
    border: solid 3px #BAD;
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
}

/* case3 */
.case3 nav {
    height: 100px;
}

.case3 ul {
    height: 40px;
    border: solid 3px #BAD;
}

.case3 li {
    height: 30px;
}


.case3 > nav > .clearfix:before{
   content: " ";
   display: block;
   height: 30px;
}