JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<ARTICLE id="intro" class="" data-publicDate="2014-04-03" alt="some interesting stuff"></ARTICLE>
<p class="btn">Let's spin!</p>

CSS

article {
}
article#intro {
}
p#intro {
}
.public.english {
}
#intro[class^=eng] {
}
#intro[alt^=some] {
}
#intro[data-publicDate^=2014] {
}
article {
    font-size:42px;
    -webkit-transition-duration:2s;
    height:400px;
    width:400px;
    
}
#intro {
    
}
.public {
    background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Artillery-spoked_wheel.jpg/600px-Artillery-spoked_wheel.jpg);
    background-size:cover;
}
.spin {
    -webkit-transform:rotate(360deg);
}
p.btn {
    display:inline-block;
    background:#dedede;
    font-size:15px;
    color:#222;
    border:2px dotted #888;
}
p.btn:hover {
    background:#444;
    color:#ddd;
    cursor:pointer;
}
.pulse {
    zoom:1.2;
}

JavaScript

// That 'javascript' on the top right is annoying.
var intro = document.getElementById("intro");
var introClasses = intro.classList;
introClasses.add("public");
//introClasses.remove("english");
document.querySelector(".btn").addEventListener("click", function() {
    introClasses.toggle("spin");
});

intro.addEventListener("mouseover", function() { intro.classList.toggle("pulse")});