JSFiddle - React, Tailwind, and code Playground

by writetobhuwan

HTML

<div id="buttons-col">
    <ul id="buttons">
        <li class="a">Artists/Bands</li>
        <li class="b">Comedians</li>
        <li class="c">Record Labels</li>
        <li class="d">Festivals &amp; Venues</li>
        <li class="e">Management</li>
        <li class="f">Industry Services</li>
        <li class="g">Agents &amp; Promoters</li>
    </ul>
</div>
<div id="items">
    <ul>
        <li>
            <div class="item-a">gotye</div>
        </li>
        <li>
            <div class="item-b">kylie minogue</div>
        </li>
        <li>
            <div class="item-b">The Temper Trap</div>
        </li>
        <li>
            <div class="item-a">Cut Copy</div>
        </li>
        <li>
            <div class="item-c">The Break</div>
        </li>
        <li>
            <div class="item-d">Augie March</div>
        </li>
        <li>
            <div class="item-e">Hilltop Hoods</div>
        </li>
        <li>
            <div class="item-c">Loon Lake</div>
        </li>
        <li>
            <div class="item-f">The Seekers</div>
        </li>
        <li>
            <div class="item-g">Little Red</div>
        </li>
    </ul>
</div>
<div id="items">
    <ul>
        <li>
            <div class="item-g">gotye</div>
        </li>
        <li>
            <div class="item-f">kylie minogue</div>
        </li>
        <li>
            <div class="item-e">The Temper Trap</div>
        </li>
        <li>
            <div class="item-d">Cut Copy</div>
        </li>
        <li>
            <div class="item-c">The Break</div>
        </li>
        <li>
            <div class="item-b">Augie March</div>
        </li>
        <li>
            <div class="item-a">Hilltop Hoods</div>
        </li>
        <li>
            <div class="item-g">Loon Lake</div>
        </li>
        <li>
            <div class="item-f">The Seekers</div>
        </li>
        <li>
            <div class="item-g">Little Red</div>
        </li>
    </ul>
</div>

CSS

#buttons {
    font-family:"HelveticaNeue-CondensedBold", "HelveticaNeue-MdCn-Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 18px;
    font-size: 1.2857142rem;
    font-weight: normal;
    line-height: 1.2;
    text-transform: uppercase;
    padding: 5px 10px;
    padding: 0.3571428rem 0.7142857rem;
    color: #158bcc;
    margin-bottom: 0px;
    margin-bottom: 0rem;
}
#buttons-col {
    float: left;
}
#buttons li:hover {
    color: #414042;
    background-color: #d0e8f5;
}
#items {
    float: right;
}
.item-a, .item-b, .item-c, .item-d, .item-e, .item-f, .item-g {
    background-color: #fff;
    color: #414042;
}
.clients-hover {
    color: #414042;
    background-color: #d0e8f5
}

JavaScript

$('#buttons li').hover(function () {
    $('.item-' + this.className).addClass('clients-hover');
},

function () {
    $('.item-' + this.className).removeClass('clients-hover');
});

$(function() {
  $('#buttons li').click(function() {
     $("[class^=item]").not($('.item-' + this.className)).removeClass('clients-hover');
    $(this).addClass('clients-hover');
      $(this).siblings().removeClass('clients-hover');
      $('.item-' + this.className).addClass('clients-hover');
  });
});