JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/FastFox/JSBind/master/jsbind.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JSbind</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jsbind.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <style type="text/css">
        .light {
            color: #5C99D6
        }
        </style>
    </head>
    <body>
        <h1 data-text="h1"></h1>
        <input type="text" data-value="foo" />
        <input type="button" data-event="value" value="alert value" />
        <input type="button" data-event="change" value="Change value" />
        <br />
        <h2>List</h2>
        <ul data-array="bar">
            <li data-id="id" data-class="name"><span data-text="name"
            data-id="id"></span> <span><input data-value="name" data-id="id"    /></span></li>
        </ul>
        <input type="button" data-event="light" value="Change to light and the style changes too"
        />
        <br />
        <input type="button" data-event="unshift" value="Unshift a second Peter" />
        <br />
        <input type="button" data-event="removePeter" value="Remove all names with Peter"
        />
        <br />
        <input type="button" data-event="removeLast" value="Remove last"
        />
        <br />
        <input type="button" data-event="showFirst" value="Show first" />
        <br />
        <input type="button" data-event="showFirstId" value="Show first id" />
    </body>
</html>

CoffeeScript

$(document).ready ->
    jsb = new JSB

    h1 = jsb.bind 'text', 'h1'
    h1 'JSBind'

    foo = jsb.bind 'value', 'foo'
    foo('Some value')

    $('[data-event=value]').bind 'click', (event) ->
        alert foo()
    
    $('[data-event=change]').bind 'click', (event) ->
        foo 'Value is changed!'

    bar = jsb.bind 'array', 'bar'
    bar [{id: '1', name: 'Michiel'}, {id: '2', name: 'Peter'}]
    
    $('[data-event=light]').bind 'click', (event) ->
        bar().set 0, { name: 'light' }

    $('[data-event=removePeter]').bind 'click', (event) ->
        bar().remove { name: 'Peter' }
    
    $('[data-event=unshift]').bind 'click', (event) ->
        bar().unshift { id: '3', name: 'Peter' }

    $('[data-event=removeLast]').bind 'click', (event) ->
        bar().remove -1
    
    $('[data-event=showFirst]').bind 'click', (event) ->
        foo JSON.stringify bar().get 0
    
    $('[data-event=showFirstId]').bind 'click', (event) ->
        #console.log bar().get 0, 'id'
        foo bar().get 0, 'id'
        #foo '1'