JSFiddle - React, Tailwind, and code Playground

by taoist

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
                
                






<div id="name">
<h1> Phil </h1>
</div>
<h2> About Me </h2>


<img src = "http://prod.static.49ers.clubs.nfl.com/nfl-assets/img/gbl-ico-team/SF/logos/home/large.png"width="100" height = "100">


<img src = "http://photos-images.active.com/file/1/3751166/optimized/fc2ff5e7-4c83-4c0f-8d5e-c3615cacddf8.gif" width="100" height = "100">
    
  
    
<h2> School </h2>
<h3> Challenger School BA campus
<h3> Things I like </h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo <i> new paragraph</i> tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum. </p>

<h3> Favorites </h3>
    <!-- Youtube video-->
    
    
    
    <iframe width="560" height="315"  src="http://www.youtube.com/embed/UZqsI7epbLc" frameborder="0" allowfullscreen></iframe>
    
    
    <!--

<video  controls poster = "http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg"> 
    <source src = "http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type ="video/mp4">
    
    </video>

    -->
    
    
<ol>
    <li> <a href= "http://www.49ers.com/">  football </a></li>
    <li> <a href= "http://na.leagueoflegends.com/"> PC games </a></li>
    <li> <a href= "http://www.sanjoseca.gov/facilities/Facility/Details/355"> scootering </a></li>
</ol>
    <form> 
        <p><b> Contact </b></p>
        <input type = "text" name = "name" value = "Your name">.
        <div>
            
            <textarea rows = "4" cols = "50"> 
            </textarea>
        </div>
            
        <div>
        <input type ="submit" name ="submit">
         </div>
        ...

CSS

@import url(http://fonts.googleapis.com/css?family=oswald);
@font-face {
    font-family: oswald;
    

} 
p {
    font-family:oswald; 
    font-size: 18px;
    line-height: 30px;
    
}

h1 {
    position:relative;
    font-size: 30px;
    letter-spacing: 10px;
    top:10px;
}





#name{ 
   
    position: relative;
    height: 50px;
    width: 100px;
    background-color:orange; 
    -webkit-animation: nameAnimation 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes nameAnimation {
    from {width: 0px; left: 0px; }
    to {width: 100%; }
}

JavaScript

$("h1").hide()
$("h1").fadeIn(1500)