JSFiddle - React, Tailwind, and code Playground
by Tom Randolph
HTML
<div id="container">
This is the container
</div>
CSS
#container{
width: 20em;
height: 15em;
margin: 5em auto auto auto;
background-color: #FFCCCC;
line-height: 15em;
text-align: center;
}
JavaScript
/*!
@package noty - jQuery Notification Plugin
@version version: 2.3.8
@contributors https://github.com/needim/noty/graphs/contributors
@documentation Examples and Documentation - http://needim.github.com/noty/
@license Licensed under the MIT licenses: http://www.opensource.org/licenses/mit-license.php
*/
if(typeof Object.create !== 'function') {
Object.create = function(o) {
function F() {
}
F.prototype = o;
return new F();
};
}
var NotyObject = {
init: function(options) {
// Mix in the passed in options with the default options
this.options = $.extend({}, $.noty.defaults, options);
this.options.layout = (this.options.custom) ? $.noty.layouts['inline'] : $.noty.layouts[this.options.layout];
if($.noty.themes[this.options.theme])
this.options.theme = $.noty.themes[this.options.theme];
else
this.options.themeClassName = this.options.theme;
this.options = $.extend({}, this.options, this.options.layout.options);
this.options.id = 'noty_' + (new Date().getTime() * Math.floor(Math.random() * 1000000));
// Build the noty dom initial structure
this._build();
// return this so we can chain/use the bridge with less code.
return this;
}, // end init
_build: function() {
// Generating noty bar
var $bar = $('<div class="noty_bar noty_type_' + this.options.type + '"></div>').attr('id', this.options.id);
$bar.append(this.options.template).find('.noty_text').html(this.options.text);
this.$bar = (this.options.layout.parent.object !== null) ? $(this.options.layout.parent.object).css(this.options.layout.parent.css).append($bar) : $bar;
if(this.options.themeClassName)
...