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;
}
#qContent
{
xmargin-bottom: -5px !important;
}
JavaScript
$(function(){
var qTitle = $("#qTitle");
var qCont = $("#qContent");
var askError = $("#askError");
function resetOne(){
qTitle.one("keydown" ,function(){
qCont.show("blind", {to: { display: "block"}}, 1500, function() {
$(this).css('display','block');
});
});
}
resetOne();
qTitle.add(qCont).blur(function(){
if(qTitle.val() == "" && qCont.val() == ""){
qCont.hide("blind", {to: { display: "none"}}, 250);
resetOne();
}
});
});