JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<footer role="contentinfo">

            <a href="http://shokadu.co.uk/" title="Shokadu" rel="home"></a>
        
        <a id="contactlink" href="#">Send Message</a>
        <div id="footeraction">
                    <form id="footercontact">
                        <fieldset>
                            <input type="text" placeholder="Name"></input>
                            <input type="text" placeholder="Email"></input>
                        </fieldset>
                            <textarea rows="4" cols="40" placeholder="Message">
                            
                            </textarea>
                        <input type="submit" value="Submit"></input>
                    </form>
        </div>
        </footer><!-- footer -->

CSS

footer {
    float:left;
    background:#a0a0a0;
    width:280px;
    padding:20px;
    color:#fff;
 }
 
 footer a,footer a:visited {
    color:#fff;
    text-decoration:none;
    font-family: 'Ubuntu', sans-serif;
    font-weight:400;
 }
 
 footer a:hover {
    color:#fff;
    text-decoration:none;
 }
 
 a#contactlink {
    padding:12px;
    color:#fff;
    background:#51b3d7;    
    font-size:14px;
 }
 
 a#contactlink span {
    font-size:30px;
 }
 
 a#contactlink:hover {
    background:#00B5F8;
 } 
 
 #footeraction {
    float:left;
    width:100%;
    display:none;
 }
 
 #footercontact {
    float:left;
    width:100%;
    margin-top:15px;
 }
 
 #footercontact input,#footercontact textarea {
     float:left;
    width:250px;
    padding:8px;
    height:22px;
    padding-top:8px;
    padding-bottom:9px;
    border:8px solid #d2d2d2;
    font-size:16px;
    font-weight:bold;
 }
 
 #footercontact textarea {
    height:77px;
    margin-right:15px;
    width:250px;
 }
 
 #footercontact fieldset {
    width:260px;
    float:left;
 }
 
 #footercontact input[type="submit"] {
    width:85px;
    height:60px;
    color:#000;
    margin-top:25px;
 }

JavaScript

$("#contactlink").toggle(
  function(e){
    $("#footeraction").slideDown(450);
    $("#contactlink").text("close form");
    $("#contactlink").css("background-color","#555");
      e.preventDefault();   
  },
  function(e){
    $("#footeraction").fadeOut(250);
    $("#contactlink").text("Send Message");
    $("#contactlink").css("background-color","#51b3d7");
      e.preventDefault();
  }
);