JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div>
<ul>
    <li class="general"><a title="General" href="#of-option-general">General</a>
    </li>
    <li class="homepage"><a title="HomePage" href="#of-option-homepage">HomePage</a>

    </li>
    <li class="headerfooter"><a title="Header Footer" href="#of-option-headerfooter">Header Footer</a>

    </li>
    <li class="categories"><a title="Categories" href="#of-option-categories">Categories</a>

    </li>
    <li class="posts current"><a title="Posts" href="#of-option-posts">Posts</a>

    </li>
    <li class="sidebar"><a title="Sidebar" href="#of-option-sidebar">Sidebar</a>

    </li>
    <li class="styling"><a title="Styling" href="#of-option-styling">Styling</a>

    </li>
    <li class="typography"><a title="Typography" href="#of-option-typography">Typography</a>

    </li>
    <li class="social"><a title="Social" href="#of-option-social">Social</a>

    </li>
    <li class="advanced"><a title="Advanced" href="#of-option-advanced">Advanced</a>

    </li>
</ul>
    </div>

CSS

ul {
padding: 0;
margin: 0;
}

li {
list-style: none;
float: left;
margin-right: 55px;
line-height: 30px;
}

div {
height: 30px;
background-color: rgba(112, 209, 205, 0.54);
padding: 10px;
}