JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div>
    <form method="post" novalidate="" id="contact">
        <input type="text" name="name" id="name" placeholder="Your full name (e.g John Smith)" onfocus="contectboxresize()">
        <br>
        <input type="email" name="email" id="email" placeholder="Your email (e.g [email protected])" onfocus="contectboxresize()">
        <br>
        <input type="text" name="subject" id="subject" placeholder="Your title (e.g Sending bug)" onfocus="contectboxresize()">
        <br>
        <textarea name="content" id="content" placeholder="What would you like to say?" onfocus="contectboxresize()" style="height: 75px;resize: none;"></textarea>
        <br>
        <input type="submit" value="Done!">
    </form>
</div>

CSS

html, body {
    height: 100%;
}
div {
    height: 200%;
    padding-top: 20px
}
#contact {
    background: #37AFFF;
    height: 200px;
}

JavaScript

var big = false,
    lastpalce = "",
    position = "";

function contectboxreturn() {
    if (big) {
        $("#contact").animate({
            "height": "200px"
        }, 400);
        big = false;
    }
}

function contectboxresize() {
    if (!big) {
        lastpalce = $(this).scrollTop();
        position = $("#contact").offset();
        $("html, body").animate({
            scrollTop: position.top + "px"
        }, 400);
        $("#contact").animate({
            "height": "100%"
        }, 400, function(){
            big = true;
        });
        $(function () {
            $(window).scroll(function () {
                if (position.top != $(this).scrollTop()) {
                    contectboxreturn();
                }
            });
        });
    }
}