JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div id="error"></div>
<div id="info"></div>
<div id="message"></div>
<div id="success"></div>

CSS

#error, #info, #success, #message{
    display: none;
}

JavaScript

$.ajax({
    url: '/echo/html',
    beforeSend: function(){
        $('#info').text('ajax start').fadeIn(500).delay(3000).fadeOut(500);
    },
    success: function(){
        $('#success').text('ajax success').fadeIn(500).delay(3000).fadeOut(500);;
    },
    error: function(x, e, r){
        $('#error').text(r).fadeIn(500).delay(3000).fadeOut(500);;
    },
    complete: function(data){
        $('#message').text(data).fadeIn(500).delay(3000).fadeOut(500);;
    }

});