JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.refer-madness.com/scripts/vendor/jquery.noty.packaged.min.js"></script>
<button id="error" style="display: block; margin-bottom: 1em;">Click me to cause an error message</button>
<button id="info" style="display: block; margin-bottom: 1em;">Click me to cause an info message</button>
<button id="success" style="display: block; margin-bottom: 1em;">Click me to cause a success message</button>

JavaScript

$("#error").on("click", function () {
    noty({text: "Dude. Stop it.", layout: 'topLeft', timeout: 5000, type: 'error', killer: true,
        theme: 'testtheme'});
});

$("#info").on("click", function () {
    noty({text: "A quick hello.", layout: 'topRight', timeout: 500, type: 'information',
        theme: 'testtheme'});
});

$("#success").on("click", function () {
    noty({text: "Can you click it?", layout: 'center', timeout: false, type: 'success', closeWith: ['click'],
          theme: 'testtheme'});
});

$.noty.themes.testtheme = Object.create($.noty.themes.defaultTheme);
$.noty.themes.testtheme.name = 'testtheme';
$.noty.themes.testtheme.style = function () {
    $.noty.themes.defaultTheme.style.apply(this);
    switch (this.options.type) {
        case 'error':
            this.$bar.css({
                backgroundColor: '#DC569F',
                borderColor: '#DC569F',
                color: '#F5F5F5'
            });
            break;
        case 'information':
            this.$bar.css({
                backgroundColor: '#ABABAB',
                borderColor: '#DC569F',
                color: '#F5F5F5'
            });
            break;
        default:
            break;
    }
    this.$message.css({
        fontWeight: 'bold'
    });
};