JSFiddle - React, Tailwind, and code Playground

by vajnabotond

HTML

<header>
        <nav>
            <ul>
                <li><a href="" id="Logo">Myweb</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">Latest</a></li>
                <li><a href="">More</a></li>
                <li><a href="">About-Us</a></li>
                <li id="login"><a href="">Login</a></li>
            </ul>
        </nav>
    </header>

CSS

nav {
    vertical-align: middle;
    background-color: #022534;
    padding: 0;
    margin: 0;

}
.nav ul {
  display: inline-block;
}
nav li {
    align-items: center;
    justify-content: space-between;
    display: inline-flex;
    padding: 10px 5%;
    background-color: none;
    font-size: 35px;
    margin: auto;
}

a {
    text-decoration: none;
    color: #e4f5ff;
}

#Logo {
    font-family: 'Poppins', sans-serif;
}