JSFiddle - React, Tailwind, and code Playground

by pedrocorreia

HTML

<ul class="nav">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></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; 
}
/* removes the margins from the list items and makes them display in a line */
ul.nav li { 
    margin: 0; 
    display: inline;
}

/* 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; 
    /*margin: 0 10px; 
    padding: 4px 8px;*/    
}

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

/* the code below is css3, and therefore is not cross browser... yet */

/* this rule makes the browser add a pipe character after the li elements*/
ul.nav li:after { content: " | "; }

/* this rule tells the browser to remove the pipe from the last element */
/* so you don't have a separator separating nothing... */
ul.nav li:last-child:after { content: ""; }