JSFiddle - React, Tailwind, and code Playground

HTML

<div id="posts">
                    <form action="#" method="post" id="askQuestion">
                            <input type="text" autocomplete="off" maxlength="60" name="qTitle" id="qTitle" placeholder="askUs"> 
                            <textarea id="qContent" maxlength="600" name="qContent"></textarea><input type="submit" name="askSubmit" value="Ask">
                    </form>
                </div>

CSS

#posts /* posts section */
{
    padding: 15px 0;
    float: right;
    width: 737px;
}

#posts input[type="text"], #posts textarea
{
    color: #287A71;
    border: 1px solid #dfdfdf;
    border-top: 1px solid #b1b1b1;
    border-left: 1px solid #b1b1b1;
    box-shadow: 2px 4px 7px #e3e3e3 inset;
    text-indent: 10px;
    width: 735px;
    height: 30px;
    font: 1.2em bolder Helvetica, Arial;
}

#posts input[type="submit"]{
    padding: 0; margin: 0;
    color: #287A71;
    box-shadow:inset 0 1px 0 0 #fff;
    background: #ededed;
    font-weight: bold;
    border-radius: 0 0 6px 6px;
    text-shadow:1px 1px 0 #fff;
    width: 100%;
}

#posts input[type="submit"]:hover{
    background: #dfdfdf;
}

#posts textarea
{
    display: none;
    width: 715px; height: 120px; max-height: 250px;
    font-size: .9em;
    padding: 10px; margin:0;
    resize: vertical;
}

#posts input[type="text"]:focus, #posts textarea:focus
{
    border:1px solid #0c75c5;
    box-shadow:0 0 10px #4f9fdc;
}

JavaScript

$(function(){
    var qTitle = $("#qTitle");
    var qCont = $("#qContent");
    var askError = $("#askError");

    function resetOne(){
        qTitle.one("keydown" ,function(){
            qCont.show("blind", {to: { display: "block"}}, 1500);
        });
    }

    resetOne();

    qTitle.add(qCont).blur(function(){
      if(qTitle.val() == "" && qCont.val() == ""){
       qCont.hide("blind", {to: { display: "none"}}, 250);
       resetOne();
      }
    });
});