JSFiddle - React, Tailwind, and code Playground

by mikeys4u

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css">
<!DOCTYPE html>
<button class="showDialog">Show</button>
<div class="loginDialog" title="Login">
My note
</div>

CSS

<style>input.text {
    margin-bottom: 12px;
    padding: 0.4em;
    width: 95%;
}

.no-title .ui-dialog-titlebar {
    display: none;
}
</style>

JavaScript

$(function () {
    $(".loginDialog").dialog({
        autoOpen: false,
        buttons: {
            "Login": function () {
                $(this).dialog("close");
            }
        },
        dialogClass: "no-title",
        hide: {
            effect: "scale",
            easing: "easeInBack"
        },
        show: {
            effect: "scale",
            easing: "easeOutBack"
        }
    });
    
    $(".showDialog").click(function() {
        $(".loginDialog").dialog("open");
    });
});