JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<a href="#" id="button">
    <span>Kougiland</span>
</a>
<audio preload="auto">
    <source src="https://github.com/nclud/2011.beercamp.com/blob/gh-pages/audio/inception.mp3?raw=true" type="audio/mp3" />
    <source src="https://github.com/nclud/2011.beercamp.com/blob/gh-pages/audio/inception.ogg?raw=true" type="audio/ogg" />
</audio>

CSS

@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: normal;
    src: local('Pacifico'), url('http://themes.googleusercontent.com/font?kit=fKnfV28XkldRW297cFLeqfesZW2xOQ-xsNqO47m55DA') format('truetype');
}
body {
    text-align: center;
    background-color: rgba(236, 82, 141, 0.79);
}

#button {
    display: inline-block;
    margin-top: 20%;
    font-size: 50px;
    color: #fff;
}

#button span {
    display: inline-block;
    padding: 20px 30px;
    font-family: 'Pacifico', Arial, sans-serif;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
}

JavaScript

document.getElementById('button').onclick = (function() {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('span')[0].innerHTML = 'Hello bitchception!';
    return false;
});