JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://www.programmingmind.com/sites/programmingmind.com/files/jquery.notifications-1.1.min.js"></script>
<br/><br/><br/>
<a href="javascript:void(0);" onclick="showNotice();">show notice</a> | 
<a href="javascript:void(0);" onclick="showError();">show error</a> | 
<a href="javascript:void(0);" onclick="showWarning();">show warning</a> |
<a href="javascript:void(0);" onclick="showWithOptions();">show using options</a> |
<a href="javascript:void(0);" onclick="$('pre#code').show();">show code</a>

CSS

/* notification container */
#jquery-notifications {position: fixed; width: 100%; left: 0; top: 0}
/* common style properties for all the notification messages */
#jquery-notifications div.notice, #jquery-notifications div.success, #jquery-notifications div.warning, #jquery-notifications div.error {margin: 0; padding: 5px; padding-left: 10px; border-bottom: 2px solid}
#jquery-notifications div.notice {background:#6C9FFC; color:#061A72; border-color:#061A72}
#jquery-notifications div.success {background:#96F96F; color:#045419; border-color:#045419}
#jquery-notifications div.warning {background:#F7AE57; color:#753903; border-color:#753903}
#jquery-notifications div.error {background:#F97C6F; color:#570F01; border-color:#570F01}
/* style property for the close text */
#jquery-notifications div > a {position:absolute; right: 0; margin-right:10px; color: #000000; text-decoration:none; border: 1px solid black; padding-right: 5px; padding-left: 5px}`

JavaScript

function showNotice() {
    $.n("This is a notice message. It will automatically go away.");
}

function showError() {
    $.n.error("This is an error message. It won't go away you have to click the x button.");
}

function showWarning() {
    $.n.warning("This is a warning message. It will automatically go away.");
}

function showWithOptions() {
    $.n("This message has options.", {
        type: "notice",
        timeout: 1000,
        stick: true,
        fadeSpeed: 700,
        close: "close me",
        effect: "fade"
    })
}