JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    function showNote(e) {

        var x = 0,
            y = 0;
        if (!e) e = window.event;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else if (e.clientX || e.clientY) {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        var noteDiv = document.getElementById("noteDiv");
        noteDiv.style.display = "block";
        noteDiv.style.left = (x + 20) + "px";
        noteDiv.style.top = (y) + "px";
    }

    function hideNote() {
        alert("NoDiv is about to be hidden");
        document.getElementById("noteDiv").style.display = "none";
    }
</script>
<div id='noteDiv'>
    <div style="margin: 5px; float: right; font-size: smaller;border:1px solid red;"><span onclick="hideNote()">Close</span>
    </div>
    <br clear="all">
    <div>Note Content</div>
</div>
<button type='button' onClick='showNote();'>Note</button>

CSS

#noteDiv {
     display:none;
     position: absolute;
 }