JSFiddle - React, Tailwind, and code Playground

by SReject

HTML

<html>
<head>
    <title>
    </title>
</head>
<body>
    <span>
        Some Text
        <div>
            text<br>
            text<br>
            text<br>
        </div>
    </span>
</body>
</html>

CSS

span { 
    position: relative; 
}
span div { 
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: #ccc;
    color: #000;    
    cursor: pointer;
    
    padding: 0px;
    border: 0px;
    width: 0px;
    opacity: 0;
}
span:hover div { 
    padding: 0px 0px 0px 2px;
    border: 1px solid #000;    
    width: 150px;    
    opacity: 1;
   
     transition: width, border opacity .0s linear .5s;
    -webkit-transition: width, border opacity .0s linear .5s;
    -moz-transition: width, border opacity .0s linear .5s;
    -ms-transition: width, border opacity .0s linear .5s;
    
    transition: opacity .5s linear .5s;
    -webkit-transition: opacity .5s linear .5s;
    -moz-transition: opacity .5s linear .5s;
    -ms-transition: opacity .5s linear .5s;
}