JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<div class='App'>
    <div id='a' class='alert alert-info' role='alert'>Loading...</div>
    <div id='w' class='well well-sm'>Loading...</div>
    <div id='e' class='alert alert-danger' role='alert'></div>
</div>

CSS

.App {
    text-align: center;
    font-size: 1.5em;
}

JavaScript

var a = $('#a'), w = $('#w'), e = $('#e');

w.hide();
e.hide();
w.text('Loaded.');

a.text('Declaring Observables...');

var src = Rx.Observable
	.interval(500)
	.take(10)
	.select(function(x) {
        if (x == 5) {
            return Rx.Observable.throw('Simulated Failure');
        }
        
        return Rx.Observable.return(x * 2);
    })
	//.catch(Rx.Observable.return('N/A'))
	//.onErrorResumeNext(Rx.Observable.return('N/A'))
	.select(function(x) { return x.catch(Rx.Observable.return('N/A')); })
	.selectMany(function(x) { return x; });

w.empty();

a.text('Subscribing...');

var sub = src.subscribe(
    function (x) {
        w.prepend($('<div/>').text(x));
        w.show();
    },
    function (x) {
        e.text(x);
        e.show();
        a.text('Failed');
    },
    function () {
        a.text('DONE');
    }
);