JSFiddle - React, Tailwind, and code Playground

by anthonyshort

HTML

<ul class="js-match-current-url">
    <li> 
        <a data-url="_display/" href="~/short-term-health-insurance">
            Short Term Health Insurance
        </a>
    </li>
    <li>
        <a data-url="long-term-health-insurance" href="~/long-term-health-insurance">
            Long Term Health Insurance
        </a>
    </li>
</ul>

CSS

body {
    padding: 40px;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    margin-bottom: 10px;
}
a {
    display: block;
    padding: 10px;
    background: #eee;
    color: #444;
}
a.current {
    color: blue;
}

JavaScript

module.exports = function(selector, className) {
    Array.prototype.forEach.call(document.body.querySelectorAll(selector), function(el){
        el.classList.toggle(className, el.getAttribute('data-url') === window.location.path);
    });
};

links('.js-links', 'is-current');