JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<script src="https://rawgit.com/giabos/ez-bind/master/build/ez-bind.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css">
<span ez-text="helloText"></span>
<button class="ui icon button" ez-on="click: doIt" ez-show="buttonVisible"> <i class="question icon"></i></button>

<select ez-value="selected">
    <option>Select...</option>
    <option ez-repeat="options" ez-text="." ez-value="."></option>
</select>

<ul>
    <li>blabla</li>
    <li ez-repeat="list"> <span ez-text="."></span> <a href="#" ez-on="click:^remove">X</a>  </li>    
</ul>

<div class="ui tiered menu">
  <a class="item" ez-class="active:bio" ez-on="click:choose">
    Active calls
  </a>
  <a class="item" ez-class="active:pics" ez-on="click:choose">
    Pics
  </a>
    
</div>
    <div ez-show="bio">BIO</div>  
    <div ez-show="pics">PICS</div>

CSS

.ui.menu {
    border-radius:0;
}
.ui.button {
    border-radius:0;
    
}

JavaScript

(function () {
    
    var vm = new EZ (document.documentElement);    
    
    vm.list = [];
    vm.options = ["first", "second", "third"];
    vm.selected = undefined;
    vm._listen('selected', function (nv) {
        vm.list.push(nv);    
    });
    
    
    vm._do(function () {
        vm.helloText = "Hello";
        vm.buttonVisible = true;
        vm.bio = true;
        vm.pics = false;
    });
    
    vm.doIt = function () {
        vm.helloText = vm.helloText + " world";        
        vm.buttonVisible = false;
    };

    vm.remove = function (idx) {
      vm.list.splice(idx,1);
    };
    
    vm.choose = function () {
        vm.bio = !vm.bio;
        vm.pics = !vm.pics;
    };
    
})();