JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grammar-box2">
<div id="div1"></div>
</div>

<p class="g-t">something</p>

CSS

.grammar-box2 {
				width: 450px;
				height: 520px;
				position: absolute;
				right: 0;
				z-index: 10;
				background-color: rgb(228, 255, 179);
				color: black;
				font-size: large;
				font-weight: bolder;
				padding: 10px;
        transform:scaleX(0);
        transition:0.3s;
        transform-origin:right;
				
}
.gramericin {
				background-color: rgba(200, 0, 0, 0.5);
}
.animateME {
  transform:scaleX(1)
}

JavaScript

$(".g-t").mouseover(function() {
	$(this).addClass("gramericin")
$(".g-t").click( function () {
$(".grammar-box2").addClass("animateME")
$(".grammar-box2 #div1").load("http://stackoverflow.com/questions/40840852/difference-between-res-setheader-and-res-header-in-node-js");	
});	
});
$(".g-t").mouseout(function() {
	$(this).removeClass("gramericin"); 
	$(".grammar-box2").click(function() {
	$(".grammar-box2 #div1").empty();
	$(".grammar-box2").removeClass("animateME")
});
});