JSFiddle - React, Tailwind, and code Playground

by jacquelineangel

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css">
<title>Portfolio · Ryan Cohen</title>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

    </head>
<body>
  <div id="header">
      <br>
      <div class="header2">
          <span class="text7"><h1> Ryan Cohen </h1></span>
          <span class="text8"><b>Coding for the better, and increasing my capabilities.</b></span>        
  </div><!--end of header-->
    </div>
    
    
    <div id="wrapper">
      <div class="about-wrapper">
      <section id="about">
          <article>
              <hr>
              <h3>About Me</h3>
              <p class="intro-text"><p class="text6">I’m a 15 year old independent iOS developer, livi-</p>ng in New Jersey. I have many dreams, and one of them is to become a full-time computer programmer, and work for a software development company. I also have a dream to live in New York City. I may not be the best, but I have confidence in myself that one day I’ll make it, and tomorrow I’ll be one step closer than I am today.</p>
          </article> 
          <hr>

          
</section>   
        

  </div><!--end of about-wrapper-->

        
        <div class="work-wrapper">
      <section id="work">
          <h3>My Work</h3>

          <div class="image">
              <a href="http://itunes.apple.com/us/app/bithero/id522476907?mt=8"><img src="http://i46.tinypic.com/idvuwm.png" width="118px″ height="118px″ alt="BitHero" /></a>
              <p>BitHero</p>
           
           
          </div><!--end of image-->
     
             </section>
             
                 <div id="reviews">
             <div class="reviews2">
                 <div...

CSS

/**********************************
Page Styles
**********************************/

html{
    background-color: #fbfbfb;
}

#header{
   background-image:url('http://i46.tinypic.com/2hs5kpi.png');
   height: 130px;
   position: relative;
   max-width: 100%
   margin-left:auto;
   margin-right:auto;
   border-bottom: 1px solid #ffffff;
}
.header2{
    -webkit-animation: flipInX 2s;
    -moz-animation: flipInX 2s;
    -ms-animation: flipInX 2s;
    -o-animation: flipInX 2s;
    animation: flipInX 2s;
    width:300px;
    margin-left: auto;
    margin-right: auto;

}


.text7, .text8{
    color: #fffff2;
}
.text7{
    font-family: 'Pacifico', cursive;
    font-size: 30px;

}

.text8{
    font-size: 15px;
}

body {
    margin: 0 auto; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0 auto; 
    -webkit-font-smoothing: antialiased;
    font-weight: 300;    
}

#wrapper, a, #work h3, .reviews2{
    font-family: "museo-sans","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.text8, .footer2{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a, .footer2{
    font-size: 15px;
}

#header, #wrapper h3, a, #work h3, .footer2{
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

#wrapper, #footer{
    text-shadow: 0 1px 0 white;
}
#header{
    text-shadow: 0 1px 0 black;
}

#wrapper h3{
    margin-bottom: 5px;
}
#wrapper {
    margin: 0px auto 0px auto; 
    align: center;
    font-size: 17px;
    color: #383833;
    width: 400px;
    margin-bottom: 40px;
    margin-top: 40px;
    
}

a {
    text-decoration: none;
    color: #019ad2;
    padding-top: 100px;
    opacity: 1;
    -webkit-transition: all .9s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}
 
a:hover {
    opacity: .6;
    -webkit-transition: all .9s...

JavaScript

<div class="picture"> <img src="http://i48.tinypic.com/10wqzw3.jpg" width="200px″ height="200px″ alt="Ryan Cohen">
        </div><!--end of picture-->

.picture{
    float: right;  
    margin-right: -270px; 
    margin-top: -212px;
    height: 200px;
    border: 1px solid #ffffff;
}

#footer {
   background-image:url('http://i50.tinypic.com/25qd9na.png');
   height: 130px;
   position: relative;
   max-width: 100%
   margin-left:auto;
   margin-right:auto;
   border-top: 1px solid #ffffff;

}
    border-bottom: 1px solid #ffffff;
    
    http://i50.tinypic.com/25qd9na.png
    
   -moz-box-shadow: 0 0 0 4px #fff, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #fff, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #fff, 2px 1px 6px 4px rgba(10,10,0,.5);


    -moz-box-shadow: 0 0 0 0px #fff, 1px 1px 6px 0px rgba(10,0,0,.3);
    -webkit-box-shadow: 0 0 0 0px #fff, 1px 1px 6px 0px rgba(10,0,0,.3);
    box-shadow: 0 0 0 0px #fff, 1px 1px 6px 0px rgba(10,0,0,.3);

http://i49.tinypic.com/359aaut.png
margin-right: 0%;