JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<header>
        <div class="logo">LOGO</div>
    
        <nav class="mainNav">
            <ul class="navBlock">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
            
            <ul class="navBlock"> 
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </nav>
    </header>

CSS

* {
        box-sizing: border-box;
    }
    
    header {
        position: relative;
        padding-top: 15px;
        /*irrelevant*/
        background-color: yellow; 
    }
    
    .logo {
        position: relative; z-index: 1;
        margin: 0 auto;
        height: 70px; width: 50px; /* appropriate logo size */
    
        /*irrelevant*/
        background: brown;
        color: #fff;
        text-align: center;
    }
    
    .mainNav {
        position: absolute;
        bottom: 0;
        width: 100%;
        
        /*irrelevant*/
        background: #aaa;
    }
    
    .navBlock {
        width: 50%;
        font-size: 0; /*remove whitepsace between li (they're inline-blocks)*/
        text-align: center;
    }
    
    .navBlock:first-child {
        float: left;
        padding-right: 28px;
    }
    
    .navBlock:last-child {
        float: right;
        padding-left: 28px;
    }
    
    .navBlock li {
        display: inline-block;
        width: 33.33333%; /*up to you but must be less than 100% divided by the total number of li's inside the .navBlock's*/
        font-size: 14px; /*recoup font-size: 0  set on .navBlock*/
    }
    
    .navBlock li a {
        display: block;
        padding: 6px; /* up to you */
    }
    
    
    /*irrelevant*/
    .navBlock li a:hover {
        background: #ddd;
    }