JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<button class="btn d-blue block" id="ask-question">Ask a new question</button>
                <div class="ask-question-wrapper" hidden="true">
                    <div class="top">
                        <span>Ask a question:</span>
                    </div>
                    <div class="middle">
                        <textarea id="question-content"></textarea>
                    </div>
                </div>

CSS

.btn {
    width: 150px;
    height: 40px;
    color:#666666;
    text-decoration: none;
}

.ask-question-wrapper {
    background: none repeat scroll 0 0 #EFF6F8;
    border: 1px solid #94ACBE;
    border-radius: 9px 9px 9px 9px;
    margin-bottom: 40px;
}

.ask-question-wrapper .middle, .top {
    padding: 0 20px;
}
.ask-question-wrapper textarea {
    color: #3F5A6B;
    font: 14px Arial;
    height: 170px;
    padding: 5px;
    width: 100%;
}

JavaScript

jQuery(function($){
    $('body').on('click', '#ask-question', function() {
        var container = $('.ask-question-wrapper');
        
        container.css('opacity', '0');
        
        $(this).fadeOut('fast', function() {
            $(this).hide();
            container.show();
            container.animate({ height: "265px",
                                opacity: 1}).animate({  
            height: "245px" });
        
        });
    });
})