JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githack.com/kylepaulsen/NanoModal/master/nanomodal.min.js"></script>
<h2>Basic Modals:</h2>
<button onclick="openModal1()">Open Modal 1</button>
<button onclick="openModal2()">Open Modal 2</button>
<button onclick="openModal3()">Open Modal 3</button>
<button onclick="openModal4()">Open Modal 4</button>
<br>
<h2>Customized Modals:</h2>
<button onclick="openModal5()">Open Modal 5</button>
<button onclick="openModal6()">Open Modal 6</button>
<button onclick="openModal7()">Open Modal 7</button>
<button onclick="openModal8()">Open Modal 8</button>

<div id="hiddenModals">
    <div id="modal4">
        <h3>This is the ULTIMATE modal!</h3>
        <p>This is some info about this modal</p>
        <br>
        Enter your name: <input id="name" type="text">
    </div>
    <div id="modal6">
        <marquee>Fancy! Fancy! Fancy! Fancy! Fancy!</marquee>
    </div>
    <img src="http://i.imgur.com/YuMZK40.png" id="modal8">
</div>

CSS

#hiddenModals {
    display: none;
}

.custom {
    text-align: center;
    font-size: 30px;
    border-radius: 0;
    background: #eeeeff;
    border: 3px dashed #000;
}

.custom .nanoModalButtons {
    border-top: 0;
    text-align: center;
}

.custom .nanoModalBtnPrimary {
    background-color: #428b42;
    border: 0;
}

.custom .nanoModalBtnPrimary:hover {
    background-color: #307130;
    border: 0;
}

.nanoModal.special {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.nanoModalOverlay.nanoModalOverride {
    transition: opacity 0.5s ease;
}

.modal7 .nanoModalContent {
    font-size: 48px;
    text-align: center;
}

.modal8 {
    text-align: center;
    background: #000;
    border-radius: 0;
}

JavaScript

// Modal 1 ========================
var modal1 = nanoModal("Test Content");


// Modal 2 ========================
var numShown = 0;
var modal2 = nanoModal("", {
    buttons: []
}).onShow(function(modal) {
    modal.setContent("Click outside the modal to close or press escape.<br>" +
                     "This Modal has been shown " + (++numShown) + " times.");
});


// Modal 3 ========================
var modal3 = nanoModal("This is super test content.", {
    overlayClose: false,
    buttons: [{
        text: "OK",
        handler: "hide",
        primary: true
    }, {
        text: "Cancel",
        handler: function(modal) {
            modal.hide();
            nanoModal("Can't Cancel!!! >:(", {
                overlayClose: false,
                autoRemove: true,
                buttons: [{
                    text: "Close",
                    handler: function(modalObj) {
                        modalObj.hide();
                        modal3.show();
                    },
                    primary: true
                }]
            }).show();
        },
        classes: "whatever"
    }]
});


// Modal 4 =======================
var modal4 = nanoModal(document.getElementById("modal4"), {
    overlayClose: false,
    buttons: [{
        text: "WHOA DUDE!",
        handler: function() {
            var name = document.getElementById("name").value;
            modal4.hide();
            if (name.length < 1) {
                nanoModal("NO! Enter your name NOW!", {autoRemove: true}).show().onHide(modal4.show);
            } else {
                nanoModal("Well hello there, " + name, {autoRemove: true}).show();
            }
        },
        primary: true
    }]
});


// Modal 5 =======================
var modal5 = nanoModal("Custom Styles!!!", {
    classes: "custom",
    buttons: [{
        text: "gross...",
        handler: "hide",
        primary: true
    }]
});


// The below modals use these functions:
nanoModal.customShow =...