JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<input type="button" value="Save" id="btn" />
<div id="feedback-provider">
    <div class="inner">
    <div id="contentswrapper">
        <div class="graphic"></div>
        <div class="text">Saving...</div>
    </div>
    </div>
<div>

CSS

body { font-family: /*Georgia,*/ Arial, sans-serif; font-size:16px; }
#feedback-provider { display:none; height: 100px; width:160px; border: 1px solid black; box-shadow: 1px 1px 3px #999; border-radius: 3px; background-color: #EFEFEF; position:relative; top: 200px; left: 200px; }
#contentswrapper { line-height: 100px; margin: 0 auto; width: 60px;  }
img { display:inline; }
#feedback-provider { color:#222; }
.inner { background-color: #FFF; }
.graphic { width: 16px; height:16px; display:inline-block; background-image: url("http://agi.tangora.com/media/ajax-loader.gif"); }
.text { display:inline-block; }

JavaScript

$(document).ready(function() {
     $("#btn").click(function(){
         $("#feedback-provider").show();//.delay(800).hide();
     });
 });