JSFiddle - React, Tailwind, and code Playground

HTML

<div id="categories_wrap">
<ul id="categories">
<li><a href="/index.html" class="class1">Home</a></li>
<li><a href="/crystals.html" class="class1">Crystals</a></li>
<li><a href="/meteorites.html" class="class1">Meteorites</a></li>
<li><a href="/faq.html" class="class1">FAQ</a></li>
<li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
<li><a href="/contact.html" class="class1">Contact</a></li>
</ul>
</div>

CSS

h1 {font-size: 30px;}
h2 {font-size: 20px;}
p {font-size: 14px;}

A.class1 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 30px; padding: 6px;}
A.class1:link, A.class1:visited {color: #FFFFFF; background-color: #0fa616;}
A.class1:hover, A.class1:active {color: #0fa616; background-color: #ffffff;}

A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}

#sub li {list-style-type: square;}

#categories li {list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline;}

body
{
    margin: 0;
}

ul
{
    padding: 0;
}

ul, li
{
    display: inline-block;
}

#categories_wrap
{
    text-align: center;
    border-top: 3px solid #0fa616;
    border-bottom: 3px solid #0fa616;
}

img
{
    display: block;
}