JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toggleDiv" id="contact">
    <form action="test.php" method="post" id="contactform" class="form">
        
            <ul>
                <li>
                    <input type="text" tabindex="1" value="Your Name" name="name" id="name" />
                </li>
                <li>
                    <input type="text" tabindex="2" value="Your Email" name="email" id="email" />
                </li>      
                <li>
                    <textarea tabindex="3" name="msg" id="msg">Your Message</textarea>
                </li> 
                <li>
                    <input type="text" tabindex="4" value="Type 'Yes, I am human'" name="captcha" id="captcha" />
                </li> 
            </ul>
        <p id="final_msg">Your Message Has Been Sent</p>
        <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" />  

</form>

</div>

CSS

#contact {
   background: #CBDD37;
   margin: 5px;
   padding: 8px;
   position:fixed;
   bottom:46px;
   z-index:10000;
   border-radius:5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}   
                         
#contact form {
    width:270px;
    background:#E5EE99;
    border:solid 1px #E5EE99;
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    padding: 3px 0;
}

#contact input[type=text], #contact 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 0 2px 6px; 
    padding: 5px 8px; 
    font-family: Calluna;
    color: #9F9F9F;
}

#contact textarea {
     height: 150px;
}
                                
#contact input[type=text]:focus, #contact textarea:focus {
    color: #383838;
}
                                
#contact .sbtn {
    border: none;
    border-bottom: 3px solid #CC6666;
    background:none;
    font-family: Calluna;
    color:#CC6666; 
    font-size:14px; 
    margin: 3px 3px 10px;
    padding-bottom: 3px;
    cursor:pointer;
    text-transform: uppercase;
    float: right;
}
                                
#contact div .sbtn:hover, #contact div .sbtn:active, #contact div .sbtn:focus {
    top: 1px;
}
                                
#contact img.msgload {
    margin: 5px;
}
                                
#contact #final_msg {
    background: #D5E9ED;
    border: 1px solid #B4E4ED;
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin:8px;
    margin-top: 15px;
    padding: 3px;
    color: #806666;
    font-size: 13px;
    font-family: Calluna;
}

#contact #final_msg {
    margin-top: 10px;
}