JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trigger" class="box">Right-click me</div>

CSS

.box {
  width: 200px;
  height: 200px;
  float: left;
  margin: 20px;
  padding: 5px 10px;
  font-size: 30px;
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 1px 2px #555;
  background-color: #FF8080;
}

.cctx{display:none;position:absolute;min-width:160px;background-color:#FFF;color:#000;border:solid 1px #BABABA;box-shadow:2px 2px 4px #ABABAB;font-family:'Segoe UI',Tahoma,sans-serif;font-size:12px}.cctx-item{cursor:default;padding:7px 25px}.cctx-item:hover{background-color:#EFEFEF}.cctx-separator{padding-bottom:5px;margin-bottom:5px;border-bottom:solid 1px #E9E9E9}

JavaScript

!function(a){var b=0;a.fn.chromeContext=function(c){var d,e=a('<div class="cctx"/>'),f=c.items.length;for(d=0;f>d;d++){var g=c.items[d],h=a("<div/>");g.separator?h.addClass("cctx-separator"):(h.addClass("cctx-item"),h.text(g.title),h.on("click",g.onclick)),e.append(h)}return e.attr("data-cctxId",b),a("body").append(e),this.attr("data-cctxId",b).on("contextmenu",function(b){var c=a('.cctx[data-cctxId="'+a(this).attr("data-cctxId")+'"]');b.preventDefault(),c.css("top",b.clientY).css("left",b.clientX).show()}).parents().on("mouseup",function(){a(".cctx:visible").hide()}),b++,this}}(jQuery);

$('#trigger').chromeContext({
    items: [
        { title: 'Hello',
         onclick: function () { console.log('hello.'); } },
        { separator: true },
        { title: 'World',
         onclick: function () { console.log('world.'); } }
    ]
});