JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id="wrapper">  
  <div id="content">
  
<!--page 1 - home  -->    
      <div id="home">
            <p class="style">[please scroll down]</p><div id="changeImg"><img src="http://cordeliafong.com/parallax/images/IMG_5223-360-w-graphicPen.jpg"></div>
<!--            <div class="secondImage"><img src="http://cordeliafong.com/parallax/images/IMG_5223-360-w-chacoal.jpg"></div>
-->            
            <div id="name"><h1>cordelia.fong</h1></div>
            
            <div id="menu" class="right"><a href="#about">about</a> . <a href="#work">work</a> . <a href="#contact">contact</a> </div>
<!--            <div class="style" class="right">[please scroll down]</div>
-->      </div>
      
<!--page 2- About me  --> 
    <a name="about"></a><div id="about">
           <h2>Something About Me...</h2>
                <p id="info">what do i have . where do i go . where do i live . what do i do</p>
				<p id="moreInfo">Please put the mouse over elements in this page including the heading.</p>

          <div id="me"> 
          <nav>
            <ul>
              <p id="info1">what do i have</p>
              <li id="pets"><a href="#">pets</a></li>
              <li id="vacation"><a href="#">trips</a></li>
              <li id="live"><a href="#">live</a></li>
              <li id="job"><a href="#">work</a></li>
            </ul>
 			</nav>
            <div id="about1">
                <p id="pets1">I have two pets. A dog named Simba and a cat named Tigger.</p>
                <p id="vacation1">My favourite spots are somewhere in the tropical.</p>
                <p id="live1">I live by the water.</p>
                <p id="job1">I designed websites.</p>
            </div>
 		</div>  
	<div id="menu" class="right paddB"><a href="http://cordeliafong.com/parallax">home</a> .<a href="#about">about</a> . <a href="#work">work</a> . <a href="#contact">contact</a> </div>
          
    </div>
<!--page 3 - work portfolio  -->      
    <a name="work"></a><div id="work">
     ...

CSS

@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;height: 500px; }

h1 {font-size: 3em; padding-bottom:20px;margin: auto;}
#menu, h1 {margin:inherit;}
a, a:link, a:hover, a:visited {color: #999;text-decoration:none;}

.padd{padding:2%}
.paddR{padding-right:1%}
.left{float:left;}
.right{float:right;}
.paddB{padding-bottom:5px;}
.style {padding-right: 10px; font-weight: bold; font-size: 10px; color: #ce0819; float:right;}
#pets1, #vacation1, #live1,  #job1 {display: none;}

#portfolio{ max-width:100%;height:400px; }
#me {/*display: none;*/ padding-top: 10%; margin: auto;}
nav ul li{display: inline; /*border-radius: 25px;*/ border:1px solid #cf997d;  padding:50px 30px; text-align:center; }
nav ul li a {  padding: 5%;}  

p#info {/*text-align: right;*/ color:#ce0819; display: none; }
p#info1 { color:#ce0819; display: none; }

#about1 { margin-top: 70px; margin-left: 50px; font-size: .9em;}

.changeColor{color:#cf997d;}

.changeImage{ -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
.secondImage {background-image: url(http://cordeliafong.com/parallax/images/IMG_5223-360-w-chacoal.jpg)}
.secondImage:hover { -webkit-opacity: 0;opacity: 0;}

.corner { border-radius: 50px; border-color:10px solid #fff;}
.transform {
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg) ;}
.zoom {zoom: 1.5}
.flip { -webkit-transform:rotate(180deg);transform:rotate(180deg)}
.spin {...

JavaScript

//change color when mouseover	   
var name = document.getElementById("name");
		name.addEventListener("mouseover", function () {
    	name.classList.toggle("changeColor");
   		 });
		 
/*//change to corner when click
var changeImg = document.getElementById("changeImg");
changeImg.addEventListener("click", function () {
	changeImg.classList.toggle("border");
   // document.querySelector("#secondImage").style.display = "block";
});	
*/	 
//about page		
var about = document.querySelector("#about h2");
		about.addEventListener("mouseenter", function () {
    	about.classList.toggle("flip");
		document.querySelector("#info").style.display = "block";
		document.querySelector("#moreInfo").style.display = "none";
   		 });
		 
var pets = document.getElementById("pets");
pets.addEventListener("mouseover", function () {
	pets.classList.add("img1");
 pets.classList.toggle("img2");
 document.querySelector("#pets1").style.display = "block";
	//document.querySelector("#info1").style.display = "block";
});		 
		
var vacation = document.getElementById("vacation");
vacation.addEventListener("mouseover", function () {
	vacation.classList.add("img3");
    vacation.classList.toggle("img4");
	document.querySelector("#vacation1").style.display = "block";
});	

var live = document.getElementById("live");
live.addEventListener("mouseover", function () {
	live.classList.add("img5");
    live.classList.toggle("img6");
	document.querySelector("#live1").style.display = "block";
});	

var job = document.getElementById("job");
job.addEventListener("mouseover", function () {
	job.classList.add("img7");
    job.classList.toggle("img8");
	document.querySelector("#job1").style.display = "block";
});	
		 
//social media		 
var fb = document.getElementById("fb");
fb.addEventListener("mouseover", function () {
   fb.classList.toggle("border");
});	

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