JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://cdn.rawgit.com/mikeric/sightglass/master/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.6/rivets.bundled.min.js"></script>
<textarea class="form-control"></textarea>
<ul id="playersList">
  <li rv-each-player="data">
    <dl>
      <dt>Name:</dt>
      <dd>{ player.name }</dd>
      <dt>Surname:</dt>
      <dd>{ player.surname }</dd>
      <dt>Shirt Number:</dt>
      <dd>{ player.number }</dd>
      <dd rv-if="player.captain"><b> Capitain! </b></dd>
    </dl>
  </li>
</ul>

CSS

.form-control {
  width: 50%;
  position: absolute;
  right: 0;
  min-height: 500px;
}

dt {
  float: left;
}

b {
  color: green;
}

JavaScript

/* Italy soccer team Fifa World Cup 2006 */
var model = {
  data: [{"number":1,"name":"Gianluigi","surname":"Buffon"},{"number":19,"name":"Gianluca","surname":"Zambrotta"},{"number":5,"name":"Fabio","surname":"Cannavaro","captain":true},{"number":22,"name":"Marco","surname":"Materazzi"},{"number":3,"name":"Fabio","surname":"Grosso"},{"number":8,"name":"Gennaro","surname":"Gattuso"},{"number":21,"name":"Andrea","surname":"Pirlo"},{"number":16,"name":"Mauro","surname":"Camoranesi"},{"number":20,"name":"Simone","surname":"Perrotta"},{"number":10,"name":"Francesco","surname":"Totti"},
  {"number":9,"name":"Luca","surname":"Toni"}]
}

// get the DOM elements
var playersList = document.getElementById('playersList'),
    textarea = document.querySelector('textarea')

// bind our data to the DOM element
rivets.bind(playersList, model)

// write our initial dataset into the textarea
textarea.value = JSON.stringify(model.data, false,'\t')
// listen the textarea changes
textarea.addEventListener('input',function(e){
    try {
       model.data = JSON.parse(e.currentTarget.value)
    } catch (e) {
    
    }
});