JSFiddle - React, Tailwind, and code Playground

HTML

<button class="del">DELETE</button>
<button class="cre">Create</button>
<div id="console"></div>
<div class="confirm">
    <div class="confirm-text"></div>
    <button class="yes">Yes</button>
    <button class="no">No</button>
</div>
<!--just for show nothing important-->

CSS

button {
    cursor:pointer;
}
#console {
    box-shadow: 0 0 12px #DDD;
    position:absolute;
    overflow:auto;
    height:250px;
    width:500px;
    bottom:10px;
    background:#FFF;
    color:#333;
}
.confirm {
    box-shadow: 0 0 12px #000;
    background:grey;
    width:300px;
    padding:10px;
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -150px;
    margin-left: -135px;
}
.confirm-text {
    padding:10px;
    background:#fff;
    border:1px solid #ccc;
}

JavaScript

$(document).ready(function () {
     $('.del').click(function () {
         confirmBox("Sure wanna delete this?", function () {
            $('#console').append('deleted<br />');
            $('.confirm').hide();
         });
     });
     $('.cre').click(function () {
         confirmBox("Sure wanna append this?", function () {
             $('#console').append('appended<br />');
             $('.confirm').hide();
         });
     });
     $('.no').click(function () {
         $('.confirm').hide();
     });
 });

 function confirmBox(text, callback) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
     $(document).off('click', '.yes');
     $(document).on('click', '.yes', callback);
 }