JSFiddle - React, Tailwind, and code Playground

HTML

<div class="green-line"></div>
<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 class="green-line"></div>



<img src="/images/line.jpg" width="100%"><br>
<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><br>
<img src="/images/line.jpg" width="100%">
    </center>

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;
}

.green-line{
    width: 100%;
    height: 5px;
    background-color: #0fa616;
}