JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gianlucaguarini.com/experiments/lib/rivets.min.js"></script>
<link rel="stylesheet" href="http://gianlucaguarini.com/experiments/lib/bootstrap.min.css">
<ul id="playersList">
    <li rv-each-player="players">
        <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> Captain! </b></dd>
        </dl>
    </li>
</ul>

CSS

dt {
  float:left;
}
b {
    color:green;
}

JavaScript

/* Italian soccer team - Fifa World Cup 2006 */
var soccerTeam = [{"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');

// pass the data to the DOM element
rivets.bind(playersList,{players:soccerTeam});