JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Right Click Somewhere</h1>

<ul id="context">
    <li><span>Undo</span></li>
<li><span>Redo</span></li>
<li><span>Cut</span></li>
<li><span>Copy</span></li>
<li><span>Paste</span></li>
<li><span>Paste as Plain Text</span></li>
<li><span>Inspect Element</span></li>
</ul>

CSS

body { background-color: #413; overflow: hidden; }
h1 { font-size: 2em; font-weight: bold; text-align: center; color: #ccc; position: absolute; top: 50%; width: 100%; }
#context { display: none; }
#context li { position: absolute; left: 0; top: 0; -webkit-tranform: rotate(150deg); opacity: 1;  transform-origin: 50% 50%; width: 10000px; text-indent: 80px; }
#context li span { z-index: 10; padding: 0 6px; border-radius: 3px; text-shadow: 0 0 6px White; }
#context li:hover span { background-color: #009; color: White; z-index: 100;text-shadow: 0 0 3px Black;}

JavaScript

function setMenu(e) {
    $('#context').show();
    $('#context li').each(function(i) {
        var w = $(this).width();
        var h = $(this).height();
        if (e) {
            e.preventDefault();
            $(this).offset({
                left: e.pageX,
                top: e.pageY - (h / 2)
            });
        }
        $(this).css('transform', 'rotate(' + (11 * (i)) + 'deg)');
        //$(this).css('-webkit-transform-origin', ''+e.pageX+' '+e.pageY);
        // $(this).css('margin-left', ''+w+'px');
    });
}

$(document).bind('contextmenu', setMenu);
$(document).bind('click', function(e) {
    $('#context').hide();
});
$(document).ready(function(e) {
    setMenu();
    $('#context').hide();
});