JSFiddle - React, Tailwind, and code Playground

by Rowan Hamilton

HTML

<a href="#" onclick="pushDev();return false;">Push</a>
<a href="#" onclick="savePage();">Save</a>

CSS

.pageMessage{
    /*position:fixed;*/
    /*top: 15%;*/
    /*right: 8%;*/
    background-color: #f5f5f5;
    opacity: 0.9;
    color: #FFF;
    font-size: 18px;
    text-align:center;
    padding: 8px;
    width: auto;
    height:auto;
    border:solid;
    border-color: #00A3DD;
    border-width: 3px;
    z-index: 1000;
    border-radius: 8px;
}

JavaScript

function pushDev(){
    var messageDiv = $("<div class='pageMessage'>Data</div>")
    $("body").prepend(messageDiv);
    setTimeout(function(){messageDiv.remove()}, 6000);
}

function savePage(){
    var messageDiv = $("<div class='pageMessage'>Saved</div>")
    $("body").prepend(messageDiv);
    setTimeout(function(){messageDiv.remove()}, 6000);
}