JSFiddle - React, Tailwind, and code Playground

HTML

<p><a href="#anchor">jump to #anchor link</a></p>
<p><a href="#pre-form-link-parent">jump to #pre-form-link-parent wrapper</a></p>
<p><a href="#pre-form-link">jump to #pre-form-link anchor link</a></p>

<p><strong>These next 3 links target the wrapper, form and input. Each should let the user jump straight to the &lt;input&gt; element when tab is pressed</strong></p>

<p><a href="#wrapper">jump to #wrapper div element</a></p>
<p><a href="#form">jump to #form form element</a></p>
<p><a href="#input">jump to #input field</a></p>

<hr>

<a id="anchor">This is a plain anchor link with no href value</a>

<p id="pre-form-link-parent">
    <a id="pre-form-link" href="#">This is a pre-form link</a>
</p>

<hr>

<p>A wrapper div containing a form, containing an input field.</p>

<div id="wrapper">
    <!--<form id="form">-->
    <form id="form" tabindex="0">
        <input id="input" type="text" />
    </form>
</div>