JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_0.14.last.min.js"></script>
<button al-repeat="b in btn" @click="active=null" @click.debounce-700="active=b">{{b}}
</button><button @click="active=null">Clear</button>

<div al-cloak>
  <div class="box {{getClass('first')}}" style="background-color: red">First here</div>
  <div class="box {{getClass('second')}}" style="background-color: green">Second</div>
  <div class="box {{getClass('third')}}" style="background-color: blue">3333</div>
  <div class="box {{getClass('fourth')}}" style="background-color: yellow">Last one</div>
</div>

CSS

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}
.box {
  height: 50px;
  width: 200px;
  position: absolute;
}

Babel + JSX

var app = {
	btn: ['first', 'second', 'third', 'fourth'],
  active: 'first',
  getClass: (box) => app.active==box?'visible':'hidden'
};

alight('body', app);