JSFiddle - React, Tailwind, and code Playground

by Dar_T

HTML

<div class="splash" style="display: block;">

   <div class="grid grid-pad" >
            <div class="col-1-1">
          <div class="image-wrap">
	<div id="aboutWrap2" >
		<a href="" class="close">Close</a>
	
		<div class="aboutContent">
			<p>I've recently graduated from the University of Guelph with a background in Biological Sciences and am currently pursuing my Masters of Industrial Design at Pratt Institute. I like minimalism with modern aesthetics. Oh and I love everything from Studio Ghibli. Feel free to contact me to just chat and don't forget to look at some of my work.</p>
            
            <p style="padding-top:50px;">私は最近、生物科学の背景とゲルフ大学を卒業したし、現在プラットインスティテュートで工業デザインの、私の修士号を追求しています。私は、現代の美学とミニマリズムが好きです。ああ、私はスタジオジブリからすべてを愛しています。ただチャットすると、私の仕事のいくつかを見てすることを忘れないでください、私に連絡して自由に感じる。  </p>
                    
<p> <div class="link">
                        Email —    <a class="links" href="mailto:[email protected]" rel="external">[email protected]</a> <br>

                          Behance —   <a class="links" href="https://www.behance.net/darrientu">behance.net</a> <br>

                         Flickr —    <a class="links" href="http://www.flickr.com/photos/94352088@N04/">flickr.com</a> <br>

                        Facebook —     <a class="links" href="https://www.facebook.com/profile.php?id=100005026811057">facebook.com</a>
                        </div></p>

		</div>
	</div>
    </div>
		</div>
	</div>

</div>
                
                  <div id="wrapper">
    


   
    <div class="grid grid-pad" style="margin-top:90px; margin-bottom:100px;" >
    
    
            <div class="col-1-1">
          <div class="image-wrap" >

                <div>

                   
                 <ul id="menu">
<li><a href="" class="about">Darrien Tu</a>
</li>
<li><a href="index.html">Works</a>
</li>

</ul>
                </div>
                
                

  </div>
  </div>

</div> </div>

CSS

::selection {
    background: #A9A9A9;
 /* WebKit/Blink Browsers */;
}

::-moz-selection {
    background: #A9A9A9;
 /* Gecko Browsers */;
}

html {
    -webkit-font-smoothing: antialiased;
    height: 100%;
    background-color: #000;
}
body {
    margin: 0px;
	-webkit-text-size-adjust:none;
	font-family: 'Istok Web', Arial, Helvetica, sans-serif;
	font-size: 10pt;
	
	
	
}


#mini-wrapper {width:100%; margin:auto;
}

#wrapper {width:90%;margin:auto;
}


#menu {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    list-style-type: none;
}

#menu li {
    display: inline;
}

#menu li a {
    margin-right: 20px;
    
    letter-spacing: 0px;
    color: #686868;
    text-decoration: none;
    float: left;
    border-bottom: 1px solid #FCFCFC;
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color .6s ease;
    -o-transition: border-color .6s ease;
    -ms-transition: border-color .6s ease;
    transition: border-color .6s ease;
}

#menu li a:hover {
    border-bottom: 1px solid #686868;
}

#about {
    width: 100%;
    margin-top: 16%;
    padding-bottom: 150px;
 
}

/*
   -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.9s;
    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.9s;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.9s;

@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateX(-1000px);
    }

    100% {
        -moz-transform: translateY(0);
    };
}

@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateX(-1000px);
    }

    100% {
        -webkit-transform: translateY(0);
    };
}

@keyframes dropHeader {
    0% {
        transform: translateX(-1000px);
    }

    100% {
        transform:...

JavaScript

$(document).ready(function(){

$('.splash').hide(); //Initially form wil be hidden.

$('.about, .close').click(function(e){
  
	 $('.splash').delay(30).slideToggle(300);
    e.preventDefault();
  });
});