JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"></div>
<div class="content">
    <div class="block"><textarea></textarea></div>
    <div class="block"><textarea></textarea></div>
</div>

CSS

.container {
    position:relative;
    height:2000px;
    background-color:blue;
}
.content {
    position:fixed;
	left:0;
	right:50px;
	bottom:-25px;
	height:25px;
	z-index:18;
    background-color:red;
}
.block {
    background-color:green;
    position:relative;
	float:right;
	width:245px;
	height:275px;
	margin:-25px 3px 275px 3px;
	border:1px solid black;
	transition:margin-top 250ms;
    cursor:pointer;
}
.block.show {
    margin-top:-275px;
}
.block:not(.show):hover{
	margin-top:-30px;
}
.block > textarea{
    position:absolute;
    right:0;
    left:0;
    bottom:0;
}

JavaScript

$('.block').click(function () {
    if(!$(this).hasClass('show')){
        var textarea = $(this).children('textarea');
    }
    $(this).toggleClass('show');
    if(textarea){
        setTimeout(function(){textarea.focus()}, 250);
    }
});
$('.block > textarea').click(function(ev){
    ev.stopImmediatePropagation();
});