JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="dimg">
<img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive" style="border:2px solid #535353;" />
</div> 
<a href="#" class="showme" onclick="return false" tabindex="1">View Bio</a>
<div id="desk" class="trans">
  <p>This is the text to be displayed when the anchor is clicked</p>
</div>

CSS

.showme {
 text-decoration:none;
 color:#535353;
 letter-spacing:1px;
 }

.showme:focus + #desk
{
 opacity:1;
 visibility:visible;
 position:relative;
 }

#desk {
visibility:hidden;
opacity:0;
position:absolute;
border-radius:10px;
margin-top:10px;
text-align:left;
}