JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="skiplinks">
    <li><a href="#navigation" accesskey="n">Navigation <span>Jump to Navigation [n]</span></a></li>
    <li><a href="#content" accesskey="c">Content <span>Jump to Content [c]</span></a></li>
    <li><a href="#footer" accesskey="f">Footer <span>Jump to Footer [f]</span></a></li>
</ul>

CSS

ul#skiplinks li a span {
   position: absolute;
   left: 10px;
   top: 10px;
   background: #000;
   color: #fff;
   padding: 20px;
   
   opacity: 0; 
   
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

ul#skiplinks li a:focus span,
ul#skiplinks li a:hover span{
    opacity: 1;
}