JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id=dax>
        <h1>DAX</h1>
    </div>
    <p id=pink>REAL BOYS DON'T MIND THE PINK.</p>
    <img id=DaxImage src="http://1.bp.blogspot.com/-6KjJbZtFS34/U09rCS-JsDI/AAAAAAAAAC8/1jekCCGP6tQ/s1600/bounce2.JPG">
    <p id=about>My mom says I'm reserved, but I like to think that I have mystique.</p>
    <p id=about2>When we go for a drive, I like to point out every single truck on the road and state it's colour.</p>
    <div id=contact>CONTACT</div>
    <p id=contactInfo>If you want to see me you should know that my bear and I are a package deal. Where ever I go, he goes. Oh, and I won't answer your fanmail in the afternoon. That's my nap time.</p>
    <br>
    <div id=facebook>
        <img src="http://1.bp.blogspot.com/-BrpYAZiBu00/U09q93BOiPI/AAAAAAAAACs/covbo4iSaFw/s1600/facebook.png">
    </div>
    <div id=twitter>
        <img src="http://3.bp.blogspot.com/-76d6z2Chbnk/U09q-AUfUlI/AAAAAAAAACw/xvZj1BYdnzE/s1600/twitter.png">
    </div>

CSS

body {
    font-family: Helvetica;
    text-align: right;
}

p {
    padding: 0;
    text-align: right;
}
#dax {
    margin:auto;
    width:500px;
    font-size:50px;
    text-align: right;
}

.dax-change {
    color: #FF3388;
}
p#pink {
    text-align: right;
    color: #ff3388;
    display: none;
}
#DaxImage {
    border-radius: 50%;
    /*    margin: 10px;*/
    width: 200px;
    padding: 10px;
    float: left;
/*    left: 50px;
    position: fixed;
    top: 50px;
    	border: solid 1px #000;
    box-shadow: 5px 5px 5px #000;	*/
}
.dax-border {
    border: solid 1px #000;
    box-shadow: 5px 5px 5px #000;
}
#about {
    display: none;
}
#about2 {
    display: none;
}
/*.dax-about1 {
    display: block;
}
*/
 #contact {
    margin:auto;
    width:500px;
    font-size:50px;
    padding-top:25px;
    text-align: right;
}
#contactInfo {
    display: none;
}
#facebook, #twitter {
    padding-top: 25px;
}
.float-image {
    padding: 4%;
    display: inline-block;
}
.float-image img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 5px solid #ff3388;
    transition: border 0.2s;
}
.float-image img:hover {
    border: 10px solid #ff3388;
}body {
    font-family: Helvetica;
    text-align: right;
}

p {
    padding: 0;
    text-align: right;
}
#dax {
    margin:auto;
    width:500px;
    font-size:50px;
    text-align: right;
}

.dax-change {
    color: #FF3388;
}
p#pink {
    text-align: right;
    color: #ff3388;
    display: none;
}
#DaxImage {
    border-radius: 50%;
    /*    margin: 10px;*/
    width: 200px;
    padding: 10px;
    float: left;
/*    left: 50px;
    position: fixed;
    top: 50px;
    	border: solid 1px #000;
    box-shadow: 5px 5px 5px #000;	*/
}
.dax-border {
    border: solid 1px #000;
    box-shadow: 5px 5px 5px #000;
}
#about {
    display: none;
}
#about2 {
    display: none;
}
/*.dax-about1 {
    display: block;
}
*/
 #contact {
    margin:auto;
    width:500px;
    font-size:50px;
    padding-top:25px;
   ...

JavaScript

var title = document.getElementById("dax");
title.addEventListener("mouseover", function () {
    title.classList.add("dax-change");
    document.querySelector("#pink").style.display = "block";
});


var clickTitle = document.getElementById("dax");
clickTitle.addEventListener("click", function () {
    document.querySelector("#about").style.display = "block";
    //       clickTitle.classList.add("dax-about1");
});

var clickAbout = document.getElementById("about");
clickAbout.addEventListener("mouseover", function () {
    document.querySelector("#about2").style.display = "block";
});

var border = document.getElementById("DaxImage");
border.addEventListener("mouseover", function () {
    DaxImage.classList.add("dax-border");
});

var contactTitle = document.getElementById("contact");
contactTitle.addEventListener("click", function () {
    document.querySelector("#contactInfo").style.display = "inline";

});

var facebookIcon = document.getElementById("facebook");
facebookIcon.addEventListener("click", function () {
    facebookIcon.classList.toggle("float-image");
});

var twitterIcon = document.getElementById("twitter");
twitterIcon.addEventListener("click", function () {
    twitterIcon.classList.toggle("float-image");
});