JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/pluma/obs/0.9.0/dist/obs.all.min.js"></script>
<script src="https://rawgithub.com/mikeric/rivets/v0.5.13/dist/rivets.js"></script>
<div id="view">
    <label>
        Your name:
        <input data-rv-value="user.name"/>
    </label>
    <div data-rv-bgcolor="color">
        Hello <span data-rv-text="user.name"></span>!<br>
        The current UNIX time is: <span data-rv-text="now"></span>
    </div>
</div>

CSS

#view {
    font: 16px Verdana, Arial, sans-serif;
}
#view div {
    padding: 10px;
}

JavaScript

$(function() {

    var colors = [
        'rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)',
        'rgba(0,255,0,0.5)', 'rgba(0,255,255,0.5)',
        'rgba(0,0,255,0.5)', 'rgba(255,0,255,0.5)'
    ];
    function resolveKeypath(obj, keypath) {
        keypath.split('.').forEach(function(key) {
            if (key) {
                obj = obj[key];
            }
        });
        return obj;
    }
    
    rivets.configure({
        prefix: 'rv',
        adapter: {
            subscribe: function(obj, keypath, callback) {
                resolveKeypath(obj, keypath).subscribe(callback);
            },
            unsubscribe: function(obj, keypath, callback) {
                resolveKeypath(obj, keypath).unsubscribe(callback);
            },
            read: function(obj, keypath) {
                return resolveKeypath(obj, keypath)();
            },
            publish: function(obj, keypath, value) {
                resolveKeypath(obj, keypath)(value);
            }
        }
    });
    
    rivets.binders.bgcolor = function(el, value) {
        el.style.backgroundColor = value;
    };
    
    var viewModel = {
        now: obs.prop(+new Date()),
        color: obs.prop(colors[0]),
        user: {
            name: obs.prop('User')
        }
    };
    
    var view = rivets.bind($('#view'), viewModel);
    
    setInterval(function() {
        viewModel.now(+new Date());
        viewModel.color(colors[
            Math.floor(Math.random() * colors.length)
        ]);
    }, 3000);

});