JSFiddle - React, Tailwind, and code Playground

by pmamode

HTML

<div id="download">Right Click to Demo <span class="amp">&amp;</span> Download</div>

CSS

html,body{height:200%;}

.nav-header {
    display: block;
    padding: 3px 15px;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    color: #999;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    text-align:left;
}
.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}
.dropdown-menu .divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
    *margin: -5px 0 5px;
    overflow: hidden;
    background-color: #e5e5e5;
    border-bottom: 1px solid #ffffff;
}
.dropdown-menu a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 20px;
    color: #333333;
    white-space: nowrap;
    text-decoration: none;
}
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image:...

JavaScript

(function ($, document) {

    var pluginName = "contextmenu",
        defaults = {
            data: [],
            fadeSpeed: 100,
            filter: function ($obj) {
                // Modify $obj, Do not return
            },
            above: 'auto',
            preventDoubleContext: true,
            compress: true
        };

    function Plugin(elem, options) {
        this.elem = elem;
        this.$elem = $(elem);
        this.$doc = $(document);
        this.$context = $('.dropdown-context');
        this.options = $.extend({}, defaults, options);

        this.init();
    }

    Plugin.prototype = {
        init: function () {
            this.events();
            this.addContext(this.options.data);
        },

        events: function () {
            var self = this;
            this.$doc.on('click', function () {
                $('.dropdown-context').fadeOut(self.options.fadeSpeed, function () {
                    self.$context.hide().find('.drop-left').removeClass('drop-left');
                });
            });
            if (this.options.preventDoubleContext) {
                this.$doc.on('contextmenu', '.dropdown-context', function (e) {
                    e.preventDefault();
                });
            }
            this.$doc.on('mouseenter', '.dropdown-submenu', function () {
                var $sub = $(this).find('.dropdown-context-sub').first(),
                    subWidth = $sub.width(),
                    subLeft = $sub.offset().left,
                    collision = (subWidth + subLeft) > window.innerWidth;
                if (collision) {
                    $sub.addClass('drop-left');
                }
            });
        },

        buildMenu: function (data, id, subMenu) {
            var subClass = subMenu ? ' dropdown-context-sub' : '',
                compressed = this.options.compress ? ' compressed-context' : '',
                $menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed +...