JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="menu">Click here!</div>
</body>

CSS

html, body {
    height: 100%;
}
.ctxmenu {
    position:absolute;
    min-width: 128px;
    height:auto;
    padding: 8px;
    margin:0;
    margin-left:0px;
    margin-top:-16px;
    border: 1px solid #999;
    background: #F8F8F8;
    box-shadow: 2px 2px 2px #AAA;
    z-index:11;
    overflow: visible;
}
.ctxline {
    display:block;
    margin:0px;
    padding:2px 2px 2px 8px;
    border:1px solid #F8F8F8;
    border-radius:3px;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    overflow:visible;
}
.ctxline:hover {
    border:1px solid #BBB;
    background-color: #F0F0F0;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
}

JavaScript

var xMousePosition = 0;
var yMousePosition = 0;


window.onload = function () {
    document.body.onclick = function () {
        checkIfPossible(event);
    }
    document.getElementById("menu").onclick = function () {
        mymenu(event, this)
    }
}

document.onmousemove = function (e) {
    xMousePosition = e.clientX + window.pageXOffset;
    yMousePosition = e.clientY + window.pageYOffset;
};


function configurar(element) {
    alert("Configurar");
}

function salir(element) {
    alert("Salir");
}

function checkIfPossible(event) {
    var temp = document.getElementById('ctxmenu1');
    if (temp != null) temp.parentNode.removeChild(temp);
}

function mymenu(event, element) {
    var x = document.getElementById('ctxmenu1');
    if (x) x.parentNode.removeChild(x);

    var d = document.createElement('div');
    d.setAttribute('class', 'ctxmenu');
    d.setAttribute('id', 'ctxmenu1');
    element.parentNode.appendChild(d);
    d.style.left = xMousePosition + "px";
    d.style.top = yMousePosition + "px";
    d.onmouseover = function (e) {
        this.style.cursor = 'pointer';
    }
    d.onclick = function (e) {
        element.parentNode.removeChild(d);
    }

    var p = document.createElement('p');
    d.appendChild(p);
    p.onclick = function () {
        configurar(element)
    };
    p.setAttribute('class', 'ctxline');
    p.innerHTML = "Configurar";

    var p2 = document.createElement('p');
    d.appendChild(p2);
    p2.onclick = function () {
        salir(element)
    };
    p2.setAttribute('class', 'ctxline');
    p2.innerHTML = "Salir";
    event.stopPropagation();
    return false;
}