JSFiddle - React, Tailwind, and code Playground
HTML
<div class="toggleDiv" id="contact">
<div>
<form action="test.php" method="post" id="contactform" class="form">
<div class="container">
<div class="field">
<input type="text" tabindex="1" value="Your Name" name="name" id="name" /><br />
</div>
<div class="field">
<input type="text" tabindex="2" value="Your Email" name="email" id="email" /><br />
</div>
<div class="field">
<textarea tabindex="3" name="msg" id="msg">Your Message</textarea><br />
</div>
<div class="field">
<input type="text" tabindex="4" value="Type 'Yes, I am human'" name="captcha" id="captcha" /><br />
</div>
<div class="field">
<label id="label" >Your Message Has Been Sent</label>
</div>
<img src="image/ajax-loader.gif" alt="Sending" class="msgload">
<input type="button" onclick="return checkForm('contactform');" id="sb" value="Submit" class="sbtn" />
<input type="hidden" value="origin" name="origin" id="origin" style="display: none;"/>
</div>
</form>
</div>
</div>
CSS
div.toggleDiv {
background: #CBDD37;
padding: 5px;
margin: 5px;
position:fixed;
bottom:46px;
z-index:10000;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div#contact div {
width: 280px;
margin:2px;
padding:0px;
}
div#contact div .form {
padding:0px;
margin:0px;
border:none;
}
div#contact div .container {
width:270px;
background:#E5EE99;
border:solid 1px #E5EE99;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div#contact div .field {
margin:1px;
padding:2px;
}
div#contact div input[type=text], div#contact div textarea {
background:#fff;
border:solid 1px #E5E5E5;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width:240px;
font-size:15px;
margin:2px;
padding:5px 8px;
float:left;
font-family: Calluna;
color: #9F9F9F;
...