JSFiddle - React, Tailwind, and code Playground

by Bob Wilson

HTML

<div class="ds">
  <span id="dsspan">
   This line is longer than the rest.
   <ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
   </ul>  
  </span>
  <a href="example.com">Hover Here</a>
</div>

CSS

#dsspan{
 background: none repeat scroll 0 0 #F8F8F8;
 border: 5px solid #DFDFDF;
 color: #717171;
 font-size: 13px;
 height: auto;
 width: auto;
 letter-spacing: 1px;
 line-height: 30px;
 margin: 0 auto;
 position: relative;
 text-align: center;
 text-transform: uppercase;
 top: 80px;
 left:30px;
 display:none;
 padding:0 20px;
}
#dsspan:after{
 content:'';
 position:absolute;
 bottom:-10px;
 height:0px;
}  
.ds {border:1px solid red}
.ds:hover #dsspan { display:block; }