JSFiddle - React, Tailwind, and code Playground

by dmarquez

HTML

<div id='navigation'>
    <ul class='mainnav'>
        <li class='regular-item'>
            <span class='menu-slash'>/</span> MEN
        </li>
        <li class='regular-item'>
            <span class='menu-slash'>/</span> WOMEN
        </li>
        <li class='regular-item'>
            <span class='menu-slash'>/</span> CURATED
        </li>
        <li class='regular-item special-item'>
            <span class='menu-slash'>/</span> OBEY AWARENESS
        </li>
        <li class='regular-item'>
            <span class='menu-slash'>/</span> PROPAGANDA
        </li>
        <li class='regular-item'>
            <span class='menu-slash'>/</span> ABOUT
        </li>
    </ul>
</div>

CSS

#navigation {
    display: block;
    font-family: 'Courier New';
    font-size: 1em;
}
.mainnav {
    list-style-type: none;
    text-align: left;
    display: block;
}

.mainnav li {
    display: inline;
}

li.regular-item {
    padding-right: 20px;
}

li.special-item {
    padding-right: 50px;
}

span.menu-slash {
    font-size: 2.5em;
}