JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canjs.com/release/latest/can.jquery.js"></script>
<script type="text/mustache" id="contactsList">
    < ul class = "clearfix" > {
        {#contacts
        }
    } < li class = "contact span8" > < a href = "javascript://"
    class = "remove" > < i class = "icon-remove" > < /i></a > < form > < div class = "row" > < div class = "span2" > < img src = "img/canjs.jpg"
    width = "100"
    height = "100" > < /div>
      <div class="span3">
        <input type="text" name="name" placeholder="Add Name" value="{{name}}">
        <select name="category" can-value="category">
          {{#categories}}
            <option value="{{data}}" >
              {{name}}
            </option > {
        {
            /categories}}
        </select > < /div>
      <div class="span3">
        <label>Address</label > < input type = "text"
            name = "address"
            value = "{{address}}" > < label > Phone < /label>
        <input type="text" name="phone" value="{{phone}}">
        <label>Email</label > < input type = "text"
            name = "email"
            value = "{{email}}" > < /div>
    </div > < /form>
    </li > {
                {
                    /contacts}}
  </ul >
</script>

JavaScript

var CONTACTS = [{
    id: 1,
    name: 'William',
    address: '1 CanJS Way',
    email: '[email protected]',
    phone: '0123456789',
    category: 'co-workers'
}, {
    id: 2,
    name: 'Laura',
    address: '1 CanJS Way',
    email: '[email protected]',
    phone: '0123456789',
    category: 'friends'
}, {
    id: 3,
    name: 'Lee',
    address: '1 CanJS Way',
    email: '[email protected]',
    phone: '0123456789',
    category: 'family'
}];

var CATEGORIES = [{
    id: 1,
    name: 'Family',
    data: 'family'
}, {
    id: 2,
    name: 'Friends',
    data: 'friends'
}, {
    id: 3,
    name: 'Co-workers',
    data: 'co-workers'
}];


$(document.body).append(can.view("contactsList", {
    categories: CATEGORIES,
    contacts: CONTACTS
}));