JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id="name">
     <h1>cordelia.fong</h1>

</div>
<div id=menu>
    <a href="#" class="about">about</a> . 
    <a href="#" class="work">work</a> . 
    <a href="#" class="contact">contact</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:300, 700);
 body {
    font-family:Verdana, Geneva, sans-serif;
    /*background-color: #ccc;*/
}
h1 {
    font-family:"Myriad Pro", sans-serif;
    font-size: 48px;line-height: 100px;
    color: green;
    margin:auto;
    width:500px;
    padding-bottom:50px;
}
a, a:link, a:hover, a:visited {
    color: #000;
    text-decoration:none;
}
.changeColor {
    color: #fff;
}
.h1-change {
    color:#6EBE6D;
}
/*.spin {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
}*/

#menu {
    display: in-line; margin-left:50px;
}

JavaScript

//var boxClasses = h1.classList;

//change color when mouseover

var name = document.getElementById("name");
name.addEventListener("mouseover", function () {
    name.classList.toggle("h1-change");
});