JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="msg-log">
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/25-1.gif" />
    <div class="quotes">Started RG Processing</div>
    <div class="quotes">Request Retrieval Complete</div>
    <div class="quotes">Content Filter Processing Complete</div>
    <div class="quotes">Style Processing Complete</div>
    <div class="quotes">Rulr Processing Complete</div>
    <div class="quotes">Get Data Complete</div>
</div>
<div id="msg-log">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-retweet"></span> Generate</button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span> Delete</button>
    </div>
</div>
<div id="msg-log">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> View</button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span> Send</button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-floppy-save"></span> Save Localy</button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-link"></span> Share URL</button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-retweet"></span> Regenerate</button>
    </div>
</div>
<div id="msg-log">
    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-retweet"></span> Regenerate</button>
    <form class="form-horizontal">
        <fieldset>
            <!-- Select Basic -->
            <div class="">
                <label class="col-md-4 control-label" for="selectbasic">Client Account</label>
                <div class="col-md-6">
                    <select id="selectbasic" name="selectbasic" class="form-control">
                        <option...

CSS

#msg-log {
    margin:20px;
}
.quotes {
    display: none;
}
#msg-log img {
    float:left;
    margin-right:10px;
}
#msg-log div {
    padding:5px;
    font-size:16px;
    color:#9A9A9A;
}
.btn-primary {
    width:80%;
}

JavaScript

(function () {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();