JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.11.last.min.js"></script>
<div al-app ctrl-main>
    <b>active:</b> {{active.name}}
    <div al-repeat="current in list" al-class="active: current==active">
        <div al-click="active=current">{{current.name}}</div>
    </div>
</div>

CSS

.active {
    background-color: red;
    color: #FFF;
}

[al-app] > div {
    cursor: pointer;
}

JavaScript

alight.ctrl.main = function(scope) {
    scope.list = [
        {name: 'macos'},
        {name: 'windows'},
        {name: 'linux'},
        {name: 'unix'}
    ];
    scope.active = scope.list[0];
};