JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<h1>logo</h1>
<ul id="nav1" class="nav">
    <li>lorem lorem lorem 1</li>
    <li>lorem 2</li>
    <li>lorem 3</li>
</ul>
<ul id="nav2" class="nav">
    <li>lorem lorem 4</li>
    <li>lorem 5</li>
    <li>lorem 6</li>
</ul>

CSS

.nav
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: absolute;
}
.nav li
{
    float: left;
}
h1
{
    position: absolute;
    left: 50%;
    top: 0;
    width: 100px;
    text-align: center;
    margin: 0 0 0 -50px;
    padding: 0;
    background-color: red;
}
#nav1
{
    right: 50%;
    margin-right: 50px;
}
#nav2
{
    left: 50%;
    margin-left: 50px;
}