JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<div id="outer">
<div id="form">
<form method="post" id="form1" action="">
<label for="cname" >Name<span class="label">*</span>:</label><br/><input type="text" id="cname" name="name" size="50" class="required"></input><br/><br/>
<label for="cemail">Email Id<span class="label">*</span>:</label><br/><input type="text" id="cemail" name="email" size="50" class="required email"></input><br/>
<label for="curl">Website<span class="label">*</span>:</label><br/><input type="text" id="curl" name="url" size="50" class="required"></input><br/>
<label for="feedback">Feedback<span class="label">*</span>:</label><br/><textarea id="feedback" cols="36" name="comment" rows="10" class="required"></textarea><br/><br/>
<input type="image" src="send.png" Value="Send" id="submit_url"/>
<p class="fb">Please feel free to get in touch, we value your feedback.</p>
</form>
</div>
<div id="feedback_label"><img src="feedback.png"/></div>
</div>
CSS
#form
{
border:1px solid black;
width:300px;
text-align:center;
background-color:#353535;
color:#fff;
font-weight:bold;
line-height:30px;
margin-top:130px;
margin-left:-320px;
float:left;
border:5px solid white;
}
.imp
{
color:red;
}
#feedback_label
{
margin-top:230px;
float:left;
margin-left:-10px;
cursor:pointer;
}
textarea
{
resize:none;
}
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.label {text-align:center;}
label.error { width: 250px; display: block; float: left; color: #f8750c; padding-left: 10px; }
input[type=text], textarea { width: 250px;margin-left:-10px; }
#submit_url{margin-left:-10px;}
#fb{color:#fff;}
JavaScript
$("#feedback_label").toggle(function(){
$("#form").animate({"margin-left":"+=310px"}, "slow");},function(){$("#form").animate({"margin-left":"-=310px"}, "slow");}
);
$("#form1").validate();