JSFiddle - React, Tailwind, and code Playground

by aprilkw

HTML

<h2 id="title"> This Super Cat </h2>

<p>All the Super Cats</p>
<div id="cats"></div>

<button id="myBtn">Try it</button>
<p id="demo"><p/>

<p id="description"> The power of Super Cats!</p>

<a href="http://www.toonpool.com/user/4023/files/eat_more_fish__864059.jpg"><img src="http://www.toonpool.com/user/4023/files/eat_more_fish__864059.jpg" id="catfish"/></a>


<button onclick="alert('Meow!');"> Hey Fish! </button>

CSS

body {
    background-image:url(http://images2.layoutsparks.com/1/243190/cats-box-default-in.gif);
    background-position:100px 0, 0 100px, 250px 200px;
}

h2 {
    font-size:30px;
    text-align:center;
    color: #fafada; 
    }
p {
    font-size: 25px;
    text-align: center;
    color: #fafada;
}

button {
    border-radius: 5px 5px 5px 5px;
    background: #fff;
}
#catfish {
    width: 100px;
    height: 100px;
    text-align: center;
}

JavaScript

document.getElementById('myButton').onclick = function(){
    alert('Meow!');
    
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}