JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://louisremi.github.com/Activable/activable.js"></script>
<ul data-activable data-trigger=">a:first-child">
    <li class="active"><a>Trigger</a> item 1, behavior "1"</li>
    <li><a>Trigger</a> item 2, behavior "1"</li>
    <li><a>Trigger</a> item 3, behavior "1"</li>
</ul>
<ul data-activable="01" data-trigger=">a:first-child">
    <li><a>Trigger</a> item 1, behavior "01"</li>
    <li><a>Trigger</a> item 2, behavior "01"</li>
    <li><a>Trigger</a> item 3, behavior "01"</li>
</ul>
<ul data-activable="0X" data-trigger=">a:first-child">
    <li><a>Trigger</a> item 1, behavior "0X"</li>
    <li><a>Trigger</a> item 2, behavior "0X"</li>
    <li><a>Trigger</a> item 3, behavior "0X"</li>
</ul>
<ul data-activable="T" data-trigger=">a:first-child">
    <li><a>Trigger</a> item 1, behavior "T"</li>
    <li><a>Trigger</a> item 2, behavior "T"</li>
    <li><a>Trigger</a> item 3, behavior "T"</li>
</ul>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

ul {
    display: table;
    width: 100%;
    margin: 0 0 15px;
    padding: 0;
    list-style-type: none;
}

li {
    display: table-cell;
    width: 32%;
    padding: 4px 8px;
    border-right: 3px solid #fff;
    background-color: #BBB;
}

li.active {
    background-color: #7BD;
}


li>a:first-child {
    font-size: 10px;
    background-color: #666;
    color: #CCC;
    padding: 2px 4px;
    margin-right: 4px;
    border-radius: 2px;
    cursor: pointer;
}


li>a:first-child:hover {
    background-color: #888;
}