JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-darkness/jquery-ui.css">
<p>Press '?' to view keyboard shortcuts</p>

<div id="keyboard-shortcuts" style="display: none">
    <table style="border-spacing: 20px 10px;">
        <tbody>
            <tr>
                <td><code>D</code></td>
                <td>Order one dozen donuts</td>
            </tr>
            <tr>
                <td><code>Shift + D</code></td>
                <td>Steal one dozen donuts</td>
            </tr>            
        </tbody>
    </table> 
</div>

CSS

.ui-widget-content {
    opacity: 0.7;
}

#keyboard-shortcuts {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .8em;
}

#keyboard-shortcuts table {
    
}

#keyboard-shortcuts table td {
    padding: 5px;
    text-align: left;
}

#keyboard-shortcuts code {
    color: #fff;
    font-size: 1.2em;
    background-color: #666;
    padding: 3px;
    border-radius: 3px;
}

JavaScript

// Show/Hide Shortcuts 
var toggleShortcuts = function () {
    
    var $ks = $('#keyboard-shortcuts'),
        settings = {
            autoOpen: false,
            draggable: false,
            closeOnEscape: true,            
            modal: true,
            resizable: false,
            width: 500,
            height: 500
        };
   
    $ks.dialog(settings);
    $('div.ui-dialog-titlebar').hide();
    
    return function () {
        ($ks.dialog('isOpen') ? $ks.dialog('close') : $ks.dialog('open'));
    };
}();

// Toggle shortcuts modal on question-mark (?) 
// keypress (e.g. Shift + /)
$(document).bind('keyup', function (e) {
    if (e.shiftKey && e.keyCode === 191) {
        toggleShortcuts();
    }
});