JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>

<div id="zero-width">
    <div id="have-width">
        <a href="#" id="not-fucusable-link">link</a>
    </div>
</div>

<h1><a href="https://www.destroyallsoftware.com/talks/wat">WAT</a></h1>

<h2>{} + {} = NaN</h2>

CSS

#zero-width {
 width: 0px;
 height: 0px    
}

#have-width {
 width: 100px;
 height: 100px; 
 border: 3px dotted red;
}

h1 {
margin-top: 100px;
}

JavaScript

$("#line1").html("How many focusable elements: " + $("body").find(":focusable").size());

$("#line2").html("Are there any visible hyperlinks: " + ($("#have-width").find("a:visible").size() > 0));

$("#not-fucusable-link").focus();

$("#line3").html("Please tell me who has focus: " + document.activeElement.id);