JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="div1">
HELLO, I will disappear in 3 seconds !
<input type="button" value="Ok" onclick="cancelDiv()" style="float: right; margin-right: 20px;
            font-weight: bold; width: 50px" />
</div>
<input type="button" value="click me" onclick="ShowDiv()">

CSS

#div1
        {
            margin-top: 10px;
            padding-left: 10px;
            position: absolute;
            float: left;
            border-top: 20px solid #8CAAE8;
            background-color: White;
            border-left: 5px solid #8CAAE8;
            border-right: 5px solid #8CAAE8;
            border-bottom: 5px solid #8CAAE8;
            font-family: Calibri;
            margin-left: 20px;
    width: 300px;
    height : 100px;
        }

JavaScript

function cancelDiv() {
            $("#div1").hide();
        }

        function ShowDiv() {
            $("#div1").css("backgroundColor", "white");
            $("#div1").show();
            setTimeout(function(){$("#div1").hide()}, 3000)
        }

        $(function () { 
            $("#div1").hide();
            $("#div1").draggable();            
        });