JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://use.fontawesome.com/1ddffe7916.js"></script>
<link rel="stylesheet" href="https://rawgit.com/yandongCoder/circular-menu/master/dist/css/circular-menu.css">
<script src="https://rawgit.com/yandongCoder/circular-menu/master/dist/js/circular-menu.js"></script>
<div class="tips">
  Right click in page.
</div>
<div id="menu1" class="menu1">

</div>

CSS

.tips {
  font-size: 40px;
  color: #999;
  position: fixed;
  top: 50%;
  left: 30%;
}

.menu1 {
  left: 50%;
  top: 50%;
}

.my-icon {
  background: url("https://rawgit.com/yandongCoder/circular-menu/master/examples/circular-menu.png");
}

.icon1 {
  background-position: 0 0;
}

.icon2 {
  background-position: 0 -56px;
}

.icon3 {
  background-position: 0 -116px;
}

JavaScript

var menu = CMenu("#menu1")
  .config({
    menus: [{
      title: "GitHub",
      icon: "fa fa-github",
      href: {
        url: "http://github.com",
        blank: true
      }
    }, {
      title: "GitLab",
      icon: ["fa fa-gitlab", '#4078c0'],
    }, {
      title: "subMenu",
      icon: "my-icon icon1",
      menus: [{
        title: 'subMenu1',
        icon: 'fa fa-firefox'
      }, {
        title: 'subMenu2',
        icon: 'fa fa-file'
      }]
    }, {
      title: "subMenu",
      icon: "my-icon icon2"
    }, {
      title: "click",
      icon: "my-icon icon3"
    }, {
      title: "hash-href",
      href: "#someHash"
    }, {
      title: "clickMe!",
      click: function() {
        alert('click event callback');
      }
    }, {
      disabled: true,
      title: "disabled"
    }]
  });



$(document).click(function() {
  menu.hide();
});
/*$(document).contextmenu(function(e) {
  menu.show([e.pageX, e.pageY]);
  return false;
});*/