<div class="container p-5 mx-auto object-center">
  <a id="top" href="#top" class="text-green-600 focus:outline-none">At first glance, it's not clear this is a link at all</a>
<a href="#top" class="underline text-blue-600 focus:outline-none">but with an underline and splash of blue, it's a lot more obvious.</a>
  <a href="#top" class="bg-blue-500 text-white rounded p-2 m-2 hover:bg-blue-700 focus:outline-none inline-block">This text is actually a link</a>
  <button href="#top" class="bg-blue-500 text-white rounded p-2 m-2 hover:bg-blue-700 focus:outline-none inline-block" onclick="window.location.hash='top';">while this one is a button</button>
  <a href="#top" class="focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">and only this link has a focus style</a>
  which makes navigating this with a keyboard very difficult!
</div>