JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<input type="button" value="OK" id="ok"/>
<input type="button" value="NOT" id="not"/>

CSS

.flash-dialog{
    width: 200px;
    padding: 20px;
    margin: 0 auto;
    text-align:center;
}
#flash-dialog{
    text-align:center;
    position:absolute;
    width: 100%;
    padding: 20px;
    top:    0px;
    left:    0px;
}

JavaScript

$(function(){
    function set_dialog(type,message)
    {
        if( $('#flash-dialog').size() == 0){
            $('body').append('<div id="flash-dialog"></div>')
        }
        var class_name = (type) ? 'ui-corner-all flash-dialog ui-state-hover':'ui-corner-all flash-dialog ui-state-error';
        $('<div/>').html(message).attr('class',class_name).appendTo('#flash-dialog').fadeOut(3000, function(){
            $(this).remove();
            if( $('.flash-dialog').size() == 0){
                $('#flash-dialog').remove();
            }
        })
    }
    $('#ok').click(function(){
       set_dialog(true,'OK')
    })
    
    $('#not').click(function(){
       set_dialog(false,'NOT')
    })
        
})