JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.3.4/packaged/jquery.noty.packaged.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;amp;subset=latin,latin-ext,cyrillic"></script>
<div class="container">

    <div id="customContainer"></div>

</div>

CSS

html {
            height: 100%;
            width: 100%;
        }
        body {
            font-family: 'PT Sans', Tahoma, Arial, serif;
            line-height: 13px
        }

JavaScript

function generate(layout) {
    var n = noty({
        text        : layout,
        type        : 'alert',
        dismissQueue: true,
        layout      : layout,
        theme       : 'defaultTheme',
        animation: {
            open: 'animated bounceInLeft', // Animate.css class names
            close: 'animated bounceOutLeft', // Animate.css class names
            easing: 'swing', // unavailable - no need
            speed: 500 // unavailable - no need
        }
    });
    console.log('html: ' + n.options.id);
}

function generateAll() {
    generate('top');
    generate('topCenter');
    generate('topLeft');
    generate('topRight');
    generate('center');
    generate('centerLeft');
    generate('centerRight');
    generate('bottom');
    generate('bottomCenter');
    generate('bottomLeft');
    generate('bottomRight');
}
$(document).ready(function () {
    generateAll();
});