JSFiddle - React, Tailwind, and code Playground

by RenaissanceDesign

HTML

<body class="page page-id-12 page-template-default logged-in admin-bar">
<div id="main-nav">
<ul id="menu-main-navigation" class="menu">
    <li id="menu-item-20" class="home menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
        <a href="http://localhost/hbpwnew/">Home</a>
    </li>
    <li id="menu-item-16" class="about menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
        <a href="http://localhost/hbpwnew/?page_id=14">About us</a>
    </li>
    <li id="menu-item-17" class="case menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-17">
        <a href="http://localhost/hbpwnew/?page_id=12">Case studies</a>
    </li>
    <li id="menu-item-18" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-18">
        <a href="http://localhost/hbpwnew/?page_id=10">Services</a>
    </li>
    <li id="menu-item-19" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
        <a href="http://localhost/hbpwnew/?page_id=6">Blog</a>
    </li>
</ul>
</div>

</body>

CSS

#main-nav {
    float:left;
    width:155px;
}
#main-nav a {
    line-height:0.5em;
    font-size:1.25em;
    text-transform:uppercase;
    color:#666;
}
#main-nav li {
    margin:0px 0px 7px 17px;
}
.home{list-style:url(img/1.png);}
.services{list-style:url(img/2.png);}
.case{list-style:url(img/3.png);}
.news{list-style:url(img/4.png);}
.recruitment{list-style:url(img/5.png);}
.about{list-style:url(img/6.png);}
.blog{list-style:url(img/7.png);}

.case.current-menu-item {background-color: red;}