JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grow" >

</div>

CSS

.topHead {
 height: 100%;
 width: 60px;
 background: #ccc;
 overflow: hidden;
 border-bottom: 6px solid #fa9a37;
 z-index: 999;
 transition: all 1.1s ease;
 cursor:pointer;
 
}

.topHead.active {
 height: 100px;
 z-index: 999;
 background: blue;
 border-bottom: 6px solid #fa9a37;
 transition: all 0.7s ease;
 box-shadow: 0 4px 2px -2px gray;
 cursor:default;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

JavaScript

$(".topHead").click(function() {
				$(this).toggleClass("active");
    			$(".TopsliderArrow").toggle();        
 
 	 		});