JSFiddle - React, Tailwind, and code Playground

by Noctane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.4/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.4/jquery.ui.position.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.4/jquery.contextMenu.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/themes/le-frog/images/ui-icons_4eb305_256x240.png"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/themes/le-frog/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/themes/le-frog/theme.min.css">
<div id='container'>
  <button id='clickMe' class="ui-button">
    Click
  </button>
</div>

JavaScript

$('#container').contextMenu({
  selector: ".ui-button",
  autoHide: true,
  trigger: "left",
  /*classNames: {
  	icon: "fa"
  },*/
  build: function($trigger, e) {
    return {
      items: {
      	add:{
        	name: "Add",
          icon:function($o,$i,itemKey,item){
          	//this plus icon is indented in to far, should be inline with the trash icon below, and             //doesnt follow theme.
            $i.html('<i class="fa fa-plus"></i> '+item.name);
            return 'context-menu-icon-updated';
          },
          callback: function(itemKey, opt){
          
          }
        },
        addMulti:{
        	name: "Add Multiple",
          icon:function($o,$i,itemKey,item){
          	//this plus icon doesn't show and is indented in to far, should be inline with the trash 						 //icon below, and doesnt follow theme.
            $i.html('<i class="fa-plus"></i> '+item.name);
            return 'context-menu-icon-updated';
          },
          callback: function(itemKey, opt){
          
          }
        },
        edit: {
          name: "Edit",
          icon: "ui-icon-pencil",
          callback: function(itemKey, opt) {

          }
        },
        editMulti:{
        	name: "Edit Multiple",
          icon:function($o,$i,itemKey,item){
          	//no icon shown
            $i.html('<i class="ui-icon-pencil"></i> '+item.name);
            return 'context-menu-icon-updated';
            }
          },
        remove: {
          name: "Delete",
          icon: "fa-trash",
          callback: function(itemKey, opt) {

          }
        },
        delMulti:{
        	name: "Delete Multiple",
          icon:function($o,$i,itemKey,item){
          	//this trash icon is indented in to far, should be inline with the trash 						 								//icon above, but it does follow theme.
            $i.html('<i class="ui-icon ui-icon-trash"></i> '+item.name);
            return 'context-menu-icon-updated';
          },
          callback:...