JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<link rel="stylesheet" href="http://2012.shokadu.co.uk/style.css">
  
      <div class="content">
      <h1>M. Gunner</h1>
      <h2>welcome home</h2>
      <p>I am a full-time employed web developer and designer working for a company in aviation.</p>

      </div>
      <div class="menu">
       <a href="#">BLoG</a><div id="basic-modal"><a class="basic" href="#">CV</a></div><a id="contact" href="#">CoNTaCT</a>
      </div>
      
      <form class="contact">
      <p>Send me your details, and I will get back to you as soon as possible.</p>
      <input type="text" placeholder="your name">
      <input type="email" placeholder="your email">
      <select name="messagetype"><option value="Website Enquiry">Website Enquiry</option><option value="Website Enquiry">Website Enquiry</option><option value="Website Enquiry">Website Enquiry</option></select>
      <input type="submit" value="send">
      </form>

CSS

form.contact {
    display:block;
          -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg); 
       -moz-transition:    all 0.6s ease-out;
    -o-transition:      all 0.6s ease-out; 
    -webkit-transition: all 0.6s ease-out; 
    -ms-transition:     all 0.6s ease-out; 
}

form.contact.open {
          -moz-transform: rotateX(0deg)!important;
    -ms-transform: rotateX(0deg)!important;
    -o-transform: rotateX(0deg)!important;
    -webkit-transform: rotateX(0deg)!important; 
}

JavaScript

$(document).ready(function(){
                $("#contact").click(function(){                   
                    $(".contact").toggleClass("open");        
                });            
         });