JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_0.14.last.min.js"></script>
<div al-app>
<nav>
  <a href @click="menu=1" :class.active="menu==1">link1</a>
  <a href @click="menu=2" :class.active="menu==2">link2</a>
  <a href @click="menu=3" :class.active="menu==3">link3</a>
</nav>

<div class="blocks">
  <div :hidden="menu!=1">Hello world!</div>
  <div :hidden="menu!=2">Hakuna Matata!</div>
  <div :hidden="menu!=3">Aloha!</div>
</div>
</div>

CSS

a {
  display: inline-block;
  border: solid 1px lightgray;
  padding: 5px 10px;
  font-size: 140%;
}
a.active { background-color: orange; }
.blocks div { padding: 2em; }