JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div id="contactFormContainer">
                <div id="contactForm">
                    <fieldset>
                        <label for="Name">Name *</label>
                        <input id="name" type="text" />
                        <label for="Email">Email address *</label>
                        <input id="Email" type="text" />
                        <label for="Message">Your message *</label>
                        <textarea id="Message" rows="3" cols="20"></textarea>
                        <input id="sendMail" type="submit" name="submit" onclick="closeForm()" />
                        <span id="messageSent">Your message has been sent successfully!</span>
                   </fieldset>
                </div>
                <div id="contactLink">Contact</div>
            </div>

CSS

#contactFormContainer
            {
            	position:absolute;
            	left:100px;
            	float:right;
                bottom:0;
            }
            #contactForm
            {
            	height:277px;
            	width:351px;
            	background-color: orangeRed;
            	display:none;
            }
            #contactForm fieldset
            {
            	padding:30px;
            	border:none;
            }      
            #contactForm label
            {
            	display:block;
            	color:#ffffff;
            }      
            #contactForm input[type=text]
            {
            	display:block;
            	border:solid 1px #4d3a24;
            	width:100%;
            	margin-bottom:10px;
            	height:24px;
            }  
            #contactForm textarea
            {
            	display:block;
            	border:solid 1px #4d3a24;
            	width:100%;
            	margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
            	background-color:#4d3a24;
            	border:solid 1px #23150c;
            	color:#fecd28;
            	padding:5px;
            }                
            #contactLink
            {
            	height:30px;
            	width:351px;
            	background-color:orange;
            	display:block;
            	cursor:pointer;
                color: white;
                text-align: center;
            }
            #messageSent
            {
            	color:#ff9933;
            	display:none;
            }

JavaScript

$("#contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });