JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://angularlight.org/bin/alight.last.min.js"></script>
<div al-app>
    <div class="container" al-init="tab='a'">
        <div al-click="tab='a'" al-css="opened: tab=='a'">a</div> 
        <div al-click="tab='b'" al-css="opened: tab=='b'">b</div> 
        <div al-click="tab='c'" al-css="opened: tab=='c'">c</div> 
    </div>
    <br>
    <div class="content">
        <div al-show="tab=='a'">a</div>
        <div al-show="tab=='b'">b</div>
        <div al-show="tab=='c'">c</div>
    </div>
</div>

CSS

.container div { 
    height: 20px;
    background-color: green;
    border-bottom: 1px solid black;
}
.opened {
    background-color: red !important;
}

.content div {
    height: 20px;
    background-color: red;
}