JSFiddle - React, Tailwind, and code Playground

by Apeksha Shah

HTML

<div id="Wrapper" class="black-tie">
    <div id="pcontainer">
        <div class="pageHeader">
            <ul>
                <li><a id="hlMainPage" class="lnkHeader" btntype="home" href="http://www.dnndev.me/page1.aspx">Home</a>

                </li>
                <li><a id="hlNewPage" class="lnkHeader" btntype="newPage" href="http://www.dnndev.me/page2.aspx">New Page</a>

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

CSS

/* states and images */
 .black-tie .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/
 .black-tie .ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    overflow: visible;
    /* removes extra width in IE */
}
.black-tie .ui-button, .black-tie .ui-button:link, .black-tie .ui-button:visited, .black-tie .ui-button:hover, .black-tie .ui-button:active {
    text-decoration: none;
}
/* button text element */
 .black-tie .ui-button .ui-button-text {
    display: block;
    line-height: normal;
}
/* button icon element(s) */
 .black-tie .ui-button-text-icon-primary .ui-icon, .black-tie .ui-button-text-icons .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}
/* Interaction states
----------------------------------*/
 .black-tie .ui-state-default, .black-tie .ui-widget-content .ui-state-default, .black-tie .ui-widget-header .ui-state-default {
    border: 1px solid #777777;
    background: #111111 url("http://download.jqueryui.com/themeroller/images/ui-bg_glass_40_111111_1x400.png") 50% 50% repeat-x;
    font-weight: normal;
    color: #e3e3e3;
}
.black-tie .ui-state-default a, .black-tie .ui-state-default a:link, .black-tie .ui-state-default a:visited {
    color: #e3e3e3;
    text-decoration: none;
}
.black-tie .ui-state-hover, .black-tie .ui-widget-content .ui-state-hover, .black-tie .ui-widget-header .ui-state-hover, .black-tie .ui-state-focus, .black-tie .ui-widget-content .ui-state-focus, .black-tie .ui-widget-header .ui-state-focus {
    border: 1px solid #000000;
    background: #1c1c1c url("http://download.jqueryui.com/themeroller/images/ui-bg_glass_55_1c1c1c_1x400.png") 50% 50% repeat-x;
    font-weight: normal;
    color: #ffffff;
}
.black-tie .ui-state-hover a, .black-tie...

JavaScript

$(document).ready(function () {
    $(".pageHeader a").each(function (i, e) {
        $(e).button({
            icons: {
                primary: "menu-" + $(e).attr("btntype")
            }
        });
    })
});