JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_1.0.alpha.last.js"></script>
<div>
  <button @click="leftUser = 1">Leanne</button>
  <button @click="rightUser = 2">Ervin</button>
</div>

<div style="float: left; width: 50%;">
  <b>Name: {{leftUser | user}}</b>
  <div al-for="post in leftUser | posts">
    {{post.id}} - {{post.title}}
  </div>
</div>

<div style="float: left; width: 50%;">
  <b>Name: {{rightUser | user}}</b>
  <div al-for="post in rightUser | posts">
    {{post.id}} - {{post.title}}
  </div>
</div>

CSS

input {width: 90%;}

JavaScript

var server = 'https://jsonplaceholder.typicode.com';
var app = {
  user: (id) => id && $.getJSON(server+'/users/'+id).then((r) => r.name),
  posts: (id) => id && $.getJSON(server+'/posts?userId='+id),
};

alight('body', app);