JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id="wrapper">
    <div id="content">
        <!--page 1 - home -->
        <div id="home">
            <div id="changeImg">
                <img src="http://cordeliafong.com/parallax/images/IMG_5223-360-w-graphicPen.jpg">
            </div>
            <!-- <img src="images/IMG_5223-360-w-chacoal.jpg class="secondImage">-->
            <div id="name">
                <h2>cordelia.fong</h2>
            </div>
            <div id="menu"> <a href="#" class="about">about</a> . <a href="#" class="work">work</a> . <a href="#" class="contact">contact</a> 
            </div>
        </div>
        <!--page 2- About me -->
        <div id="about">
            <!--<div id="me"><h2>Something About Me...</h2></div>-->
            <div id="aboutMe" class="" data-public-date="2014-04-10" alt="aboutMe" data-price="400" data-camel-cased-name="This is blue" style="color:#0ff">
                 <h2>Something About Me...</h2>
            </div>
            <div id="pets"><a href="#">what i have</a>
            </div>
            <div id="vacation"><a href="#">where i go</a>
            </div>
            <div id="live"><a href="#">where i live</a>
            </div>
            <div id="job"><a href="#">what i do</a>
            </div>
        </div>
        <!--page 3 - work portfolio -->
        <div id="work">
            <div id="portfolio">
                	<h2>My Work</h2>

                <p class="projects">Project 1</p>
                <div>	<a href="#"><img src="http://cordeliafong.com/parallax/images/IMG_1062-db-1.jpg" class="left padd"></a>

                    <!--<a href="#"><img src="http://cordeliafong.com/parallax/images/IMG_1062-db-1.jpg"> class="right padd"></a>-->
                </div>
                <p class="projects"></p>
            </div>
        </div>
        <!--page 4 - contact -->
        <div id="contact">
            <div id="contactMe">
                <h2>Contact</h2>

                <form id="form" action="#" method="post">
               ...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:300, 700);
 @media (max-width: 600px) {
    font-size:1.2em;
}
body {
    font-family:Raleway, Verdana, Geneva, sans-serif;
    background-color: #000;
    color: #999;
    background-image:url(http://www.culturalsolutions.co.uk/images/para.png), url(http://www.culturalsolutions.co.uk/images/para.png), url(http://www.culturalsolutions.co.uk/images/para.png);
    background-position:100px 0, 0 100px, 250px 200px;
    /*width: 1024px; height: 3000px;*/
}
img {
    max-width:100%;
    height:auto;
}
#home, #about, #work, #contact {
    border: 1px #003300 solid;
    padding: 20px;
    width:60%;
    margin: auto;
    margin-top:5%;
    margin-bottom:5%;
    background-color:#fff;
}
h1 {
    font-size: 3em;
    padding-bottom:50px;
    margin: auto;
}
#menu, p, h1 {
    margin:inherit;
}
a, a:link, a:hover, a:visited {
    color: #999;
    text-decoration:none;
}
#menu, .all {
    /*display: inline-block;*/
}
.padd {
    padding:2%
}
.paddR {
    padding-right:1%
}
.left {
    float:left;
}
.right {
    float:right;
}
#pets, #vacation, #live, #job {
    display: none;
}
#portfolio {
    max-width:100%;
    height:400px;
}
nav ul li {
    display: inline;
    border:1px solid #999999;
    padding:30px 15px;
}
nav ul li a {
    padding: 5%;
}
.changeColor {
    color:#cf997d;
}
.changeImage {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.secondImage {
    display:none;
}
.secondImage:hover {
    -webkit-opacity: 0;
    opacity: 0;
}
.corner {
    border-radius: 25px;
    border-color:5px solid #F00;
    /* -webkit-transform:rotate(360deg);
    transform:rotate(360deg) ; */
}
.flip {
    -webkit-transform:rotate(20deg);
    transform:rotate(20deg)
}
.spin {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
}
/*form*/
 fieldset {
    margin: 1em 0;
    padding: 1em;
    border : 1px dotted #ccc;
}
form div {
    padding: 0.4em 0;
}
label {
    display:...

JavaScript

//change color when mouseover	   
var name = document.getElementById("name");
var changeColor = name.classList;
name.addEventListener("mouseover", function () {
    changeColor.toggle("changeColor");
});


//change to corner when mouseover
aboutMe.addEventListener("mouseover", function () {
    aboutMe.classList.toggle("corner");
});


//focus
var form = document.getElementById("form");
form.addEventListener("focus", function (event) {
    event.target.style.outline = "1px solid #cf997d";
}, true);

//blur
form.addEventListener("blur", function (event) {
    event.target.style.outline = "";
}, true);