JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<ul id="main-menu-links" class="links clearfix">
    <li class="menu-198 first">
        <a href="/">Home</a>
    </li>
    <li class="menu-317">
        <a href="/about-kiss-digital">About</a>
    </li>
    <li class="menu-346">
        <a href="/services">Services</a>
    </li>
    <li class="menu-379">
        <a href="/our-work" title="">Our Work</a>
    </li>
    <li class="menu-392 active-trail active">
        <a href="/blog" title="" class="active-trail active">Blog</a>
    </li>
    <li class="menu-380 last">
        <a href="/contact-us" title="Get in touch">Contact</a>
    </li>
</ul>

CSS

a:link {
    color: #872254;
    text-decoration: none;
}
.clearfix, .views-row {
    display: block;
}
ul.links {
    color: #68696b;
}
/* --------------- Main Menu ------------ */
#main-menu {float:right; width:600px; padding-top:18px;}
#main-menu-links li {
    float:left;
    font-size:18px;
    margin-right:10px;
    padding-left:10px;
}
#main-menu-links li.active {
    background: magenta
}
#main-menu-links a {
    float:left;
    font-family: 'DaxRegular';
    padding:4px 15px 5px 5px;
}
#main-menu-links a:hover {
    color:#7c1044;
    text-decoration:none;
}
#main-menu-links li.active a:hover,
#main-menu-links li.active a.active:hover { color:fff;}

#main-menu-links a.active {
    background: magenta;
}