JSFiddle - React, Tailwind, and code Playground

by pedrocorreia

HTML

<ul class="nav">
    <li><a href="#">Menu item 1</a></li>
    <li class="separator">|</li>
    <li><a href="#">Menu item 2</a></li>
    <li class="separator">|</li>
    <li><a href="#">Menu item 3</a></li>
    <li class="separator">|</li>
    <li><a href="#">Menu item 4</a></li>
    <li class="separator">|</li>
    <li><a href="#">Menu item 5</a></li>
</ul>

CSS

/* removes the margins, padding and the bullets */
ul.nav { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
}
/* make the li elements display inline and add margins to the sides to separate them*/
/* defaults text inside li elements to the color red  */
ul.nav li { 
    display: inline;
    color: red;
    margin: 0 2px;
}

/* float the anchors left. this makes behave like inline-block elements */
/* enabling you to set width, in this case by adding padding */
/* so the clickabe area is larger */
/* also sets basic color scheme and margins between links */
ul.nav li a {     
    text-decoration: none;
}

/* this handles the color changes when the mouse hovers over the links */
ul.nav li a:hover {     
    color: red; 
}