JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="tab_area">
    <legend>Tab works here</legend>
    <p>
        <input type="text" />
    </p>
    <p>
        <input type="text" />
    </p>
    <p>
        <input type="text" />
    </p>
    <p>More info <a href="#" title="Link">here</a>

    </p>
    <p>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </p>
</fieldset>
<p>
    <input type="button" class="tab" value="Click me to Tab" />
</p>

CSS

input, select, textarea {
    border: 1px solid #b8b8b8;
}
input:focus, select:focus, textarea:focus {
    border: 1px solid #323232;
}
a {
    color: #cc0000;
    text-decoration: none;
}
a:focus {
    text-decoration: underline;
}

JavaScript

var focusAbles = $('.tab_area').find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]');
$('.tab').on('mousedown', function (e) {
    e.preventDefault();
    var inFocus = $(':focus');
    if (inFocus.length) {
        var focusIndex = focusAbles.index(inFocus);
        if (focusIndex + 1 < focusAbles.length) {
            focusAbles.eq(focusIndex + 1).focus();
        } else {
            focusAbles.eq(0).focus();
        };
    } else {
        focusAbles.eq(0).focus();
    };
});