JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="tip">

<a href="javascript:;" class="tt" onclick="tog(this)"><span>Show Info</span><div class="qtip">Here is the info you are looking for. If you click on me I will scroll away.</div></a>

</div>

CSS

.tip a {text-decoration:none;color:blue;}

.tt2 .qtip {
	position: absolute;
	z-index: 99;
	background-color: #fff;
	border: 1px solid #ccc;
	margin:5px 0 0 0;
	padding: 10px 20px 10px 10px;
	color:#000;
text-decoration:none;
  
	background-image: url('data:image/gif;base64,R0lGODlhDgAOAKIAAKqqqvj4+Le3t9fX1////97e3gAAAAAAACH5BAAHAP8ALAAAAAAOAA4AAAM4CLrc9DA+9UaIYUxABhAXEQiARo1fgIIEJZICHLqvwm4QmkLuKuMr1Y/iuaFMnE7okcFJno0oIwEAOw==');
	background-repeat: no-repeat;
	background-position: right 5px top 5px;
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.42);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.42);
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.42);
  
-webkit-transition-property: all, width, max-height;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
-webkit-transition-delay: 0s, 0s, 0.5s;
  
  width:280px;max-height:500px;overflow:hidden;
}
		
.tt	.qtip {background-color: #fff;
	border: 0px solid #ccc;
	margin:5px 0 0 0;
	padding:0;
	color:#000;text-decoration:none;

-webkit-transition-property: all, max-height, width;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
-webkit-transition-delay: 0s, 0s, 0.5s;


width:0px;max-height:0px;overflow:hidden;
    
    }

JavaScript

function tog(el){
	if(el.className == "tt"){
		el.className = "tt2";
	} else {
		el.className = "tt";
	}
}