JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div id="header-nav-container">

    <ul class="initial-nav left">
        <li><a class="active" href="#">home</a></li>
        <li><a href="#">talk</a></li>
        <li><a href="#">topics</a></li>
    </ul>



    <ul class="initial-nav right">
        <li><a href="#">shop</a></li>
        <li><a href="#">about</a></li>
        <li class="sys"><a href="#">share your story</a></li>
    </ul>
</div> <!-- /#header-nav-container -->

CSS

body.home div#header div#header-nav-container {
    display: inline-block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    padding: 0;
    width: 100%;
}
#header-nav-container ul li {
    color: #008000;
    display: inline-block !important;
    float: left;
    position: relative;
}
ul.initial-nav {
    animation: 0.75s ease 0.15s normal none 1 fadeInDown;
    border-bottom: 12px solid #00FFAB;
    color: #FFFFFF;
    display: inline-block;
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.8em;
    list-style-type: none;
    margin: 20px 0 0;
    padding: 0;
    text-transform: lowercase;
    width: 375px;
}
ul.initial-nav li a {
    color: inherit;
}
ul.initial-nav li a.active {
    border-bottom: 15px solid #FF0000;
    bottom: 0;
    padding-bottom: 5px;
}
ul.initial-nav li a:hover {
    text-decoration: none;
}
ul.initial-nav li.sys {
    color: #5FD6E5;
    font-weight: 600;
}
ul.initial-nav.left {
    text-align: left;
}
ul.initial-nav.left li:not(:first-of-type) {
    margin-left: 110.5px;
}
ul.initial-nav.right {
    text-align: left;
}
ul.initial-nav.right li:not(:first-of-type) {
    margin-left: 51px;
}
body.home img#header-logo {
    animation: 0.75s ease 0s normal none 1 fadeInUp;
    height: 150px;
    margin-left: 35px;
    margin-right: 33px;
    position: relative;
    width: 150px;
}