JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<button data-modal="#my-dialog">Open</button>
<dialog id="my-dialog" open>

    <form method="dialog">
        <p><label for="animal">Favorite animal:</label></p>
        <p>
            <select id="animal">
                <option></option>
                <option>Brine shrimp</option>
                <option>Red panda</option>
                <option>Spider monkey</option>
            </select>
        </p>
        <p>
            <button value="cancel">Cancel</button>
            <button id="confirmBtn" value="default">Confirm</button>
        </p>
    </form>

</dialog>

CSS

dialog {
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    background-color: #fff;
    border: 0 none;
    padding: 2rem;
}

dialog p:first-child,
dialog menu:first-child {
    margin-top: 0;
}

dialog p:last-child,
dialog menu:last-child {
    margin-bottom: 0;
}

JavaScript

Array.from(document.querySelectorAll('[data-modal]')).forEach(function(trigger) {

	let dialog = document.querySelector(trigger.dataset.modal);

    console.log(dialog);
    
    trigger.addEventListener('click', function onOpen() {
        if (typeof dialog.showModal === "function") {
            dialog.showModal();
        } else {
            alert("The <dialog> API is not supported by this browser");
        }
    });

});