JSFiddle - React, Tailwind, and code Playground

by Pearlin Lawrence

HTML

<ARTICLE id="intro" class="" data-publicDate="2014-04-03" alt="some interesting stuff"  data-price ="400" style ="color:#0ff">Some text </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://cdn.vectorstock.com/i/composite/16,53/bicycle-wheel-vector-501653.jpg);
    background-size:cover;
}
.spin {
    -webkit-transform:rotate(360deg);
    -moz-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("spin");});
myEle.classList.toggle("MyClass",something == another_thing);
//myEle.classList.toggle("forsale",myObject.isThisThingForSale ());

intro.style.border = "2px solid green";
intro.style.color="#foo";
var spin = prompt ("How much should I zoom?");
intro.style.zoom = spin;