JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <a id="forgot">Forgot?</a>

    <div id="forgot-dialog" style="display:none;" title="Reset your password">
        <form id="forgotform" action="/forgotPassword.php" method="post">
        <label for="forgot_email">Email</label>
        <!-- <input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" /> -->
        </form>
        
    </div>

<table id="hulk">
    <tr>
        <td>Foo</td>
        <td>ironman</td>
    </tr>
</table>

JavaScript

$("#forgot").click(function(e) {
    $("#forgot-dialog").dialog("open");
    e.preventDefault();
});

$("#forgot-dialog").dialog({
    modal: true,
    autoOpen: false,
    height: 255,
    width: 300,
    buttons: {
        "Change Table Color": function() {
            $('#hulk').css('background-color', 'yellow');
        },
        Cancel: function() {
            $('#hulk').css('background-color', 'red');
            $(this).dialog("close");
        }
    },
    close: function(event, ui){
        $('#hulk').css('background-color', 'blue');
    },
});