JSFiddle - React, Tailwind, and code Playground

by badsyntax

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div id="data-area-1">
	<div data-bind="if: pendingRequest1">
		<img src="http://www.dontbeatourist.co.uk/images/loading-spinner.gif?1349786953"/>
	</div>
	<div data-bind="with: person1">
		<span data-bind="text: name"></span>
		<span data-bind="text: surname"></span>
	</div>
</div>
<br/>
<br/>
<div id="data-area-1">
	<div data-bind="if: pendingRequest2">
		<img src="http://www.dontbeatourist.co.uk/images/loading-spinner.gif?1349786953"/>
	</div>
	<div data-bind="with: person2">
		<span data-bind="text: name"></span>
		<span data-bind="text: surname"></span>
	</div>
</div>
<br/>
<br/>
<div id="data-area-1">
	<div data-bind="if: pendingRequest3">
		<img src="http://www.dontbeatourist.co.uk/images/loading-spinner.gif?1349786953"/>
	</div>
	<div data-bind="with: person3">
		<span data-bind="text: name"></span>
		<span data-bind="text: surname"></span>
	</div>
</div>
<br/>
<br/>

JavaScript

var PersonModel = function (name, surname) {
    this.name = ko.observable(name);
    this.surname = ko.observable(surname);
};

var ViewModel = function () {
    this.setObservables()
    this.getData();
};

ViewModel.prototype.setObservables = function () {

    this.pendingRequest1 = ko.observable(false),
    this.pendingRequest2 = ko.observable(false),
    this.pendingRequest3 = ko.observable(false)

    this.person1 = new PersonModel()
    this.person2 = new PersonModel();
    this.person3 = new PersonModel();
};

ViewModel.prototype.getData = function () {
    this.getPerson1Data();
    this.getPerson2Data();
    this.getPerson3Data();
};

ViewModel.prototype.getPerson1Data = function () {
    
    this.pendingRequest1(true);
    
    $.ajax({
        url: '/echo/json/',
        type: 'JSON',
        method: 'POST',
        data: {
            json: JSON.stringify({
                name: 'Richard',
                surname: 'Willis'
            }),
            delay: 3
        },
        success: $.proxy(function (data) {
            this.person1.name(data.name);
            this.person1.surname(data.surname);
        }, this),
        complete: $.proxy(function () {
            this.pendingRequest1(false);
        }, this)
    });
};

ViewModel.prototype.getPerson2Data = function () {
    
    this.pendingRequest2(true);
    
    $.ajax({
        url: '/echo/json/',
        type: 'JSON',
        method: 'POST',
        data: {
            json: JSON.stringify({
                name: 'Danie',
                surname: 'de Kock'
            }),
            delay: 1
        },
        success: $.proxy(function (data) {
            this.person2.name(data.name);
            this.person2.surname(data.surname);
        }, this),
        complete: $.proxy(function () {
            this.pendingRequest2(false);
        }, this)
    });
};

ViewModel.prototype.getPerson3Data = function () {
    
    this.pendingRequest3(true);
    
    $.ajax({
        url:...