JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<div id="m" mouseout="ChangeOut()"  style="display: none; background: #5f646b;position:absolute; width: 100px;top: 50px;left: 50px;cursor: default" >
    <i>Menu item 1</i>
    <i>Menu item 2</i>
    <i>Menu item 3</i>
    <i>Menu item 4</i>
</div>

<div id="user">

<div id="1"  style="width: 100px;height: 100px;background: red;float: left;cursor: pointer"></div>

<div id="2"  style="width: 100px;height: 100px;background: black;margin-left: 120px;cursor: pointer"></div>
</div>

JavaScript

var buttons = document.getElementById('user');
    buttons.onclick = function(e) {
        var id = e.target.id;
        document.getElementById('m').style.display='block';
        document.getElementById('m').style.left=event.pageX;
        document.getElementById('m').style.top=event.pageY;
    };
    function ChangeOut() {
        document.getElementById('m').style.display='none';
    }