JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<ul class="nav nav-pills">
    <li><a href="index.html">HOME</a></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="careers.html">CAREERS</a></li>
    <li><a href="contacts.html">CONTACTS</a></li>
</ul>

CSS

ul.nav {
    padding: 10px 0;
    display: block;
    text-align: center;
    background: white;
    font-size: 12px;
}
ul.nav li {
    display: inline;
    text-align: center;
    padding: 10px;
    border-right: 1px solid #f0f0f0;
}
ul.nav li:last-child {
    border-right: none;
}
ul.nav li a {
    text-decoration: none;
    color: black;
}
/* just a bit of aesthetic styling */
 body {
    background: black;
}
ul.nav {
    font-family: sans-serif;
    margin-top: 10px;
}