JSFiddle - React, Tailwind, and code Playground

by chim

HTML

<div class="menu-wrap">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="About ">About Us</a></li>
        <li><a href="Products</">Products</a></li>
        <li><a href="Blog">Blog</a></li>
        <li><a href="FAQs">FAQs</a></li>
        <li><a href="Contact">Contact</a></li>
    </ul>
</div>

CSS

.menu-wrap li{
  /* apply a float for FF and webkit */
  float: left;
  /* ie6 and ie7 center align li elements */  
  *float: none;
  *display:inline;
  zoom:1;
}
.menu-wrap {
  /* FF and webkit centre align ul */
  display: table;
  margin: 0 auto;
  text-align: center;
}

/************************
** some simple styling **
*************************/
body {
  font-family: Arial, sans-serif;
  font-size: 79%;
}
.menu-wrap li {
  padding: 0 5px;
  font-weight: bold;
}
a {
  color: #777;
  text-decoration: none;
}
a:hover {
  color: #900;
  text-decoration: none;
}