JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="width=device-width"/>
<ul>
    <li><a href="javascript:focus('#empty')">#empty</a></li>
    <li><a href="javascript:focus('#emptyTabindex')">#emptyTabindex</a></li>
    <li><a href="javascript:focus('#neg1')">#neg1</a></li>
    <li><a khref="javascript:focus('#pos1')">#pos1</a></li>
    <li><a href="javascript:focus('#pos2')">#pos2</a></li>
    <li><a href="javascript:focus('#neg1 h1')">#neg1 h1</a></li>
    <li><a href="javascript:focus('#pos1 h1')">#pos1 h1</a></li>
    <li><a href="javascript:focus('#pos2 h1')">#pos2 h1</a></li>
    <li><a href="javascript:focus('[tabindex=\'0\']')">[tabindex=0]</a></li>
    <li><a href="javascript:focus('[tabindex=\'1\']')">[tabindex=1]</a></li>
    <li><a href="javascript:focus('[tabindex=\'2\']')">[tabindex=2]</a></li>
    <li><a href="javascript:focus('[tabindex=\'3\']')">[tabindex=3]</a></li>
    <li><a href="javascript:focus('[tabindex=\'4\']')">[tabindex=4]</a></li>
    <li><a href="javascript:focus('[tabindex=\'5\']')">[tabindex=5]</a></li>
    <li><a href="javascript:focus('[tabindex=\'6\']')">[tabindex=6]</a></li>
</ul>

<div tabindex="9" id="empty"></div>
<div tabindex="" id="emptyTabindex">
    <p>Some story</p>
</div>

<div tabindex="0">Tabindex = 0</div>

<div tabindex="-1" id="neg1">
<h1>h1</h1>
<p tabindex="6">Testing... Testing...</p>
<p>One, two, three</p>
</div>

<div tabindex="1" id="pos1">
<h1>h1</h1>
<p tabindex="4">Testing... Testing...</p>
<p tabindex="5">One, two, three</p>
</div>

<div tabindex="2" id="pos2">
<h1 tabindex="3">h1</h1>
<p>Testing... Testing...</p>
<p>One, two, three</p>
</div>

JavaScript

function focus(selector) {
    document.querySelector(selector).focus();
}