JSFiddle - React, Tailwind, and code Playground

HTML

<div class="other"></div>
  <div id="context" class="menu">
    <div class="menu-item">item 1</div>
    <div class="menu-separator"></div>
    <div class="menu-item">item 2</div>
    <div class="menu-item">item 3</div>
  </div>

CSS

body{
  background-color: #111;
  border: 1px solid green;
  height: 256px;
  overflow: hidden;
}

.menu{
  background-color: #333;
  width: auto;
  max-width: 256px;
  height: auto;
  display: inline-block;
  padding: 0px;
  color: lime;
  border-radius: 4px;
  position: absolute;
}

.menu-item{
  height: auto;
  margin: 6px;
  margin-left: 0px;
  margin-right: 0px;
  line-height: 1em;
  width: auto;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 6px;
}

.menu-item:hover{
  background-color: #555;
  cursor: pointer;
}

.menu-separator{
  border-bottom: 1px solid yellow;
  width: 100%;
  height: 1px;
  margin: 0px;
  margin-top: 6px;
  margin-bottom: 6px;
  position: relative;
}

.other{
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;
  display: block;
  left: 99px;
  top: 87px;
}

JavaScript

var body = document.getElementsByTagName('body')[0];
var context = document.getElementById('context');
context.style.display = "none";

body.addEventListener('contextmenu', function(e){
  if(e.ctrlKey){
    return;
  }
  else if(e.target == body){
  e.preventDefault();

  context.style.left = e.pageX + "px";
  context.style.top = e.pageY + "px";
    
  if((context.clientHeight + e.pageY) > (body.clientHeight)){
    context.style.top = (e.pageY - context.clientHeight) + "px";
  }
    
  if((context.clientWidth + e.pageX) > (body.clientWidth)){
    context.style.left = (e.pageX - context.clientWidth) + "px";
  }
  context.style.display = "block";
  }else{
    e.preventDefault();
  }
}, false );

body.addEventListener('click', function(e){
  if(!e.target.className.match(/^menu/)){
    context.style.display = "none";
  }
});