JSFiddle - React, Tailwind, and code Playground

by aprilkw

HTML

<article id="intro">
    This is a box
</article>

<p class="btn">Let's spin!</p>
<button id="myBtn">Try it</button>

<p id="demo"><p/>

<button onclick="alert('hello!');"> Say Hello! </button>

CSS

article {
    font-size:25px;
    -webkit-transition-duration:2s;
}
#intro {
    border:2px solid black;
    border-radius: 5px 5px 5px 5px;
    height: 100px;
    width: 500px;
}

#myBtn {
    display:inline-block;
    background:#dedede;
    font-size:15px;
    color:#222;
    border:2px dotted #888;
    margin: center;
}
#myBtn:hover {
    background:#444;
    color:#ddd;
    cursor:pointer;
}

p.btn {
    display:inline-block;
    background:#dedede;
    font-size:15px;
    color:#222;
    border:2px dotted #888;
}

.spin {
    -webkit-transform:rotate(360deg);
}

JavaScript

document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

document.getElementById('myButton').onclick = function(){
    alert('Hello!');
}

var intro = document.getElementById("intro");
var introClasses = intro.classList;
document.querySelector(".btn").addEventListener("click", function() {
    introClasses.toggle("spin");
});