JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <ul id="col1">
        <li>Home</li>
        <li>About</li>
        <li>Team</li>
        </ul>
        <ul id="col2">     
        <li>Store</li>
        <li>Blog</li>
        <li>Contact</li>
        </ul>
    </nav>

CSS

nav{
     background-color:red;
     max-width:100px;
   }
   nav ul {

        overflow: hidden;
        text-transform: uppercase;
    }

ul{
    margin: 10px 20px 10px 20px;
}

li {
    padding: 5px 0;
}

    #col1 {
        list-style: none;
        display: block;
        float: left;
   
}

#col2 {
    display: block;
    float: left;
}