JSFiddle - React, Tailwind, and code Playground

by tnhu

HTML

<div id="StickyWin_1358996886602" class="StickyWinInstance SWclearfix"
style="display: block; position: absolute; z-index: 10000; opacity: 1; left: 400px; top: 412px;">
    <div class="modalWrap modal_kbd show">
        <div class="modalHeading">
             <h3 style="cursor: move;">Keyboard shortcuts</h3><span class="close">Close window</span>

        </div>
        <div id="kbd" class="modalBody">
            <ul>
                <li><kbd>Control</kbd> + <kbd>Return</kbd>  <span>Run fiddle</span>

                </li>
                <li><kbd>Control</kbd> + <kbd>s</kbd>  <span>Save fiddle (Save or Update)</span>

                </li>
                <li><kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>Return</kbd>  <span>Load draft</span>

                </li>
                <li><kbd>Control</kbd> + <kbd>↑</kbd> or <kbd>Control</kbd> + <kbd>↓</kbd>  <span>Switch editor windows</span>

                </li>
                <li><kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>↑</kbd>  <span>Toggle sidebar</span>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.StickyWinInstance {
    display: block;
    position: absolute;
    z-index: 10000;
    opacity: 1;
    left: 1019px;
    top: 412px;
}
.modalWrap.show {
    opacity: 1;
    -webkit-transform: scale(1);
}
.modalWrap {
    padding: 10px;
    background: #fff;
    z-index: 300;
    font-size: .8em;
    -webkit-transition-duration: 3s;
    -webkit-transition-property: webkit-transform opacity;
    -webkit-transform: scale(0.94);
    opacity: 0;
    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.3);
    border: solid 1px #ACB3B9;
}
.modal_kbd {
    width: 500px;
}
#kbd kbd {
    border: solid 1px #ABABAB;
    font-size: 10px;
    font-family:'Lucida Grande';
    padding: 2px 3px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #999;
}