JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div id="siteContainer">
    <div id="header">This is the header</div>
    <div id="body">This is the body</div>
    <div id="footer">
        <div>
            <p>This is the footer - click the 'button' below</p>
        </div>
        <div id="button"> <a href="javascript: void(0)">Click Me</a>

        </div>
        <div id="buttonContainer">
            <div>A 'quick contact' form would go here.</div>
        </div>
    </div>
</div>

CSS

* {
    color: #000000;
}
#siteContainer {
    width: 400px;
    display: block;
    overflow: hidden;
}
#header {
    width: 100%;
    padding: 5px;
    display: block;
    background-color: #CCCCC1;
}
#body {
    width: 100%;
    height: 300px;
    padding: 5px;
    display: block;
    background-color: #FF0153
            position: absolute;
            top: 80px;
            bottom: 60px;

}
#footer {
    width: 100%;
    height: 70px;
    padding: 5px;
    display: block;
    color: #FFFFFF;
    background-color: #333333;
}
#button a {
    width: 60px;
    padding: 5px;
    display: block;
    color: #FFFFFF;
    background-color: #CCCCCC;
    text-decoration: none;
    text-align: center;
    float: right;
}
#button a:hover {
    background-color: #666666
}
#close a {
    font-size: 10px;
    display: block;
    float: right;
    clear: both;
    text-decoration: none;
}

JavaScript

$("#buttonContainer").dialog({
    modal: false,
    autoOpen: false,
    position: {
        my: "center center",
        at: "center center",
        of: "#body"
    },
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
    }
});

$('#button a').click(function () {
    $("#buttonContainer").dialog('open');
});