JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div class="note_wr" id="alert_box"></div>

<button>Note</button>

CSS

body { background: #000; }
.note_wr {
    position: absolute;
    top: 47px;
    width: 700px;
    left: 50%;
    margin-left: -350px;
    min-height: 37px;
    text-align: center;
}

.note_bl {
    color: #464646;
    background: #fffcd3;
    border-radius: 25px;
    min-height: 37px;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px 20px 10px 20px;
}

JavaScript

(function($) {
	'use strict';

	$.fn.note = function(options) {
		var settings = $.extend({text: 'notification', cont: null}, options);

		if(settings.cont === null) return 0;

		settings.cont.hide();
		settings.cont.empty();

		var n = $('<div/>', {'class':'note_bl', text: settings.text});

		settings.cont.append(n).fadeIn(300);		

		setTimeout(function() {
			settings.cont.fadeOut(100);
		}, 5000);
	}

})(jQuery);

$('button').on('click', function() {
    $.note({text: 'hello', cont: $('#alert_box')});
});