JSFiddle - React, Tailwind, and code Playground

by mslilafowler

HTML

<body>

<button id="enableSuspension">Enable Suspension</button>

<div id="notification-box">
</div>

</body>

CSS

button {
  padding: .7em;
}

/*Notification alerts*/
#notification-box {
	position: fixed;
	bottom: 1em;
	left: 1em;
	z-index: 999999;
}
#notification-box p {
	background-color: rgba(0,0,0,.7);
	width: 200px;
	border-radius: 5px;
	padding: .7em;
	margin: .5em;
	color: white;
	font-size: .9em;
}

JavaScript

$('body').on("click", "#enableSuspension", function(){
	  $('#notification-box').append('<p>Client suspension enabled.</p>').fadeTo(2000, 1, function(){
        $('#notification-box, #notification-box p').fadeTo(1000, 0);
    });
});