JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/marklagendijk/jQuery.tabbable/master/jquery.tabbable.js"></script>
<div>
    <h1>jQuery.tabbable demo</h1>    
    <p>
        This page showcases what you could do with jQuery.tabbable. Use the dropdown below to try the different modes.
    </p>
    
    <h2>Current mode: <span class="mode"></span></h2>
    
    <div id="explanations">
        <p class="none">
            Tabbing is currently disabled. This is done by registering an 'keydown' listener which executes 'event.preventDefault()'.
        </p>
        
        <p class="tabbable">
            Tabbing is now simulated via jQuery.tabbable's '$.tabNext()' and '$.tabPrev()' methods. <br />
            Tabbing works the same as default browser tabbing, except that you can't tab to elements outside of the page (address bar of the browser etc).
        </p>
        
        <p class="focusable">
            Tabbing is now simulated via jQuery.tabbable's '$.focusNext()' and '$.focusPrev()' methods. <br />
            Tabbing works the same as default browser tabbing, except that you can't tab to elements outside of the page (address bar of the browser etc). <br />
            The difference with '$.tabNext' and '$.tabPrev' is that now elements which are 'focussable', but not 'tabbable' (elements with tabindex"=-1") can be selected.
        </p>
        
        <p class="default">
            Default browser tabbing. We do nothing here.
        </p>
    </div>
</div>

<form>
    <fieldset>
        <legend>Tab mode selection</legend>
        <label for="tabMode">
            Tab mode
        </label>
        <select id="tabMode">
            <option value="none">Tabbing disabled</option>
            <option value="tabbable">jQuery.tabbable tabbing</option>
            <option value="focusable">jQuery.tabbable focussing</option>
            <option value="default">Default browser tabbing</option>
        </select>
    </fieldset>
    
    <fieldset>
        <legend>Some...

CSS

input:focus, textarea:focus, select:focus {
    outline: 1px solid red;
}

JavaScript

$(document).ready(function(){
    $(document).keydown(handleDocumentKeyDown);
    $('#tabMode').change(showExplanation);
    showExplanation();
});

function handleDocumentKeyDown(event){
    if(event.which === 9){
        var tabMode = $('#tabMode').val();
        switch(tabMode){
            case 'tabbable':
                if(event.shiftKey){
                    $.tabPrev();
                    
                }
                else{
                    $.tabNext();
                }
                event.preventDefault();
                break;
                
            case 'focusable':
                if(event.shiftKey){
                    $.focusPrev();
                }
                else{
                    $.focusNext();
                }
                event.preventDefault();
                break;
                
            case 'none':
                event.preventDefault();
        }
    }
}

function showExplanation(){
    var explanations = $('#explanations p');
    explanations.hide();
    
    var tabMode = $('#tabMode').val();
    explanations.filter('.' + tabMode).show();
    
    var tabModeOption = $('#tabMode option:selected');
    $('h2 .mode').text(tabModeOption.text());
}