JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="small" id="window">
        <!-- Окно вопроса -->
        <textarea class="window-textarea" name="window-textarea" autofocus></textarea>
        <div class="hidden" id="div-window-userform">
            <form name="window-userform">
                <input id="window-userform-email" type="text" name="window-userform-email" placeholder="Укажите адресс Вашей электронной почты" />
                </br>
                <input id="window-userform-password" type="text" name="window-userform-password" placeholder="Придумайте пароль для входа на Pro-Experts.ru" />
            </form>
        </div>
        <div class="window-button">
            <!-- Кнопка "Спросить!" --> <span class="window-button-span" id="window-button-span">Спросить...</span>

        </div>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
div {
    display: block;
}
.wrapper {
    margin: 0 auto;
    width: 960px;
    height: 1000px;
    background: #FFF;
}
#window {
    position: relative;
    margin: 0px auto;
    width: 500px;
    height: 300px;
    border: 1px solid #EEE;
    border-radius: 10px;
    background: #DDD;
}
#window textarea {
    display: block;
    margin: 20px;
    width: 460px;
    height: 200px;
    border-radius: 10px;
    border: 1px solid #EEE;
    outline: none;
    resize: none;
    font-size: 24px;
}
.window-button {
    position: absolute;
    left: 150px;
    bottom: 18px;
    width: 200px;
    height: 40px;
    border: 1px solid black;
    border-radius: 5px;
    background: #FFF;
}
.window-button-span {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    font-size: 24px;
}
.window-button-span-go {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    font-size: 24px;
}
#div-window-userform {
    position: absolute;
    left: 20px;
    bottom: 65px;
    width: 460px;
    height: 80px;
    opacity: 0;
}
#div-window-userform form {
    margin: 0 auto;
}
#div-window-userform input {
    display: block;
    margin: 0 auto;
    width: 350px;
    height: 20px;
    outline: none;
    border-radius: 5px;
    text-align: center;
}

JavaScript

$(document).ready(function () {
    $(".window-button-span").click(function () {
        if ($(".window-textarea").val().length) // Вопрос заполнен
        {
            $(".small").animate({
                "height": "400px"
            }, 300).removeClass("small").addClass("big");
            $("#div-window-userform").delay(150).css("display", "block").animate({
                opacity: 1
            }, 400);
            $(".window-button-span").text("Отправить!").removeClass("window-button-span").addClass("window-button-span-go");
        } else // Вопрос НЕ заполнен
        {
            alert("Пожалуйста, сформулируйте Ваш вопрос!");
        }
    });
});

$(document).on("click", ".window-button-span-go", function () {
    alert("Блабла");
});