JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Show the keyboard!"> <!-- the button -->
<div id="wrapper"> <!-- the keyboard -->
    <!-- type your code here, make sure that it's css is like the textarea below, display:none;. Then copy-paste the jquery line which says 'textarea', and change 'textarea' to whatever element you added. -->
    <textarea></textarea>
</div>

CSS

#wrapper {
    position:relative;
    margin-top:30px;
    background-color:#CCC;
    width:400px;
    height:0px;
}

textarea {
    display:none;
    margin:0 auto;
    width:200px;
    height:160px;
}

JavaScript

$(document).ready(function() {
    $('input').click(function() { // when the button is clicked...
        $('#wrapper').animate({ height: '+=200px'},100);
        // ...increase the height of the wrapper by 200px
        $('textarea').css({ 'display': 'block'});
        // ...make sure that the textarea is visible
    })
});