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 () {
    $(this).one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
        if ($(this).hasClass('show')) $(this).children('textarea').focus();
    });
    $(this).toggleClass('show');
});
$('.block > textarea').click(function (ev) {
    ev.stopImmediatePropagation();
});