JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<div ng-app="myApp" ng-controller="myController">
    <p ng-class="{success:statusCode=='success',error:statusCode=='error',notification:statusCode=='notification'}">{{msg}}</p>
    <button ng-disabled="disabled" ng-click="goodDataClickHandler()">Good Data</button>
    <button ng-disabled="disabled" ng-click="badDataClickHandler()">Bad Data</button>
    <button ng-disabled="disabled" ng-click="noDataClickHandler()">No Data</button>
</div>

CSS

.error{
    background:rgb(255, 173, 173);
    font-weight: 900;
    font-size: larger;
    color:red;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}

.notification{
    background:rgb(180, 173, 255);
    font-weight: 900;
    font-size: larger;
    color:blue;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}

.success{
    background:rgb(143, 250, 143);
    font-weight: 900;
    font-size: larger;
    color:green;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller("myController", ["$scope", "myService", function (scope, myService) {
	var promise;
    var successHandler = function(data){
		scope.disabled = false;
		scope.statusCode = 'success';
		console.log(data.msg);
        scope.msg = data.msg;
	}
	
	var errorHandler = function(data){
		scope.disabled = false;
		scope.statusCode = 'error';
		console.log(data.msg);
		scope.msg = data.msg;
	}
	
	var notificationHandler = function(msg){
		scope.statusCode = 'notification';
		console.log(msg);
		scope.msg = msg;
	}
	scope.goodDataClickHandler = function () {
		scope.disabled = true;
		promise = myService.getRealData();
        promise.then(successHandler, errorHandler, notificationHandler);
    };

    scope.badDataClickHandler = function () {
		scope.disabled = true;
        promise = myService.getBadData();
        promise.then(successHandler, errorHandler, notificationHandler);
    }
	
	scope.noDataClickHandler = function () {
		scope.disabled = true;
        promise = myService.getNoData();
        promise.then(successHandler, errorHandler, notificationHandler);
    }
}]);
myApp.factory("myService", ['httpWithRetries', function (http) {
    return {
        //Simulate good response from server
        getRealData: function () {
            return http.send({
                method: 'POST',
                url: '/echo/json/',
                data: "json=" + encodeURI(JSON.stringify({statusCode:'success', msg:'its Working!'}))
            });
        },
        //Simulate network error
        getNoData: function () {
            return http.send({
                method: 'POST',
                data: {},
                url: 'http://example.com/dummy'
            });
        },
        //Simulate bad response from server
        getBadData: function () {
            return http.send({
                method: 'POST',
                data: "json=" + encodeURI(JSON.stringify({statusCode:'error', msg:'its not...