JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<link rel="stylesheet" href="https://www.cssscript.com/demo/lightweight-context-menu-javascript-library-justcontext-js/justcontext.css">
<script src="https://www.cssscript.com/demo/lightweight-context-menu-javascript-library-justcontext-js/justcontext.js"></script>
<link rel="stylesheet" href="https://www.cssscript.com/wp-includes/css/sticky.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div class="jctx-host jctx-id-1 demo">Right-click me</div>
<!-- 
<ul class="jctx jctx-id-1 jctx-black jctx-black-shadow" style="opacity: 0; display: none;">
-->
<ul class="jctx jctx-id-1 jctx-white  jctx-white-shadow" style="opacity: 0; display: none;">

  <li data-action="back"><i class="fa fa-backward"></i> Back</li>
  <li data-action="forawrd"><i class="fa fa-forward"></i> Forward</li>
  <li data-action="refresh"><i class="fa fa-refresh"></i> Refresh</li>
  <hr>
  <li data-action="save"><i class="fa fa-file"></i> Save As</li>
  <li data-action="print"><i class="fa fa-print"></i> Print</li>
  <li data-action="disable" class="disabled"><i class="fa fa-power-off"></i> Disabled Item</li>
</ul>

CSS

body {
  font-family: 'Roboto';
}

.demo {
  margin: 30px auto;
  width: 450px;
  height: 320px;
  background-color: #eee;
  text-align: center;
  line-height: 320px;
}

h1 {
  text-align: center;
  margin-top: 150px;
}

JavaScript

function handleMenuAction(evt) {
      alert("Action required: " + evt);
    }