JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.azatoth.net:8080/~azatoth/jquery-ui-1.8rc3/ui/jquery-ui.js"></script>
<div id="main"></div>
<div id="a" class="ui-helper-hidden a"></div>
<div id="b" class="ui-helper-hidden b"></div>
<button id="butt">Click me</button>
<div id="submain"></div>

CSS

#butt {
position: absolute;
left: 200px;
top: 400px;
}
#main {
position: absolute;
width: 400px;
height: 200px;
top: 200px;
left: 100px;
background: #dccdaa;
}
#submain {
 position: absolute;
 width: 400px;
 height: 1000px;
 top: 500px;
 left: 30px;
 background: transparent;
 }
.a {
display: none;
    height: 3em;
    background: #efdfad;
    border: 2px solid #dfcf9d;
    width: 400px;
    opacity: .95;
    position: absolute;
    text-align: center;
}

.b {
display: none;
    position: absolute;
}

JavaScript

$("#butt").click(function(){
    var panel = $("#a");
var speed=1000;
    var action = $("#b");
var main = $("#main");

    action.empty();
    panel.empty();
    panel.html("jQuery ....");

     var button_no = $("<button/>", {text: 'no'}).appendTo(action)
     .button({text: false, icons: { primary: 'ui-icon-close' } });

     var button_yes = $("<button/>", {text: 'yes'}).appendTo(action)
     .button({text: false, icons: { primary: 'ui-icon-check' } });
    action.buttonset();

    panel.position({
        'my': 'bottom',
        'at': 'top',
         'of': main,
    });
    action.position({
        'my': 'top',
        'at': 'top',
        'of': main,
    });

    panel.show("slide").delay(2000).hide("slide");
    action.show("slide").delay(2000).hide("slide");

});