JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<button>click me</button>

<a href="#">click me</a>

<pre><code></code></pre>

CSS

button:hover {
  background: blue;
  color: white;
}

button:active {
  background: green;
  color: white;
}

JavaScript

const button = document.querySelector('button');
const a = document.querySelector('a');
const code = document.querySelector('code');

button.addEventListener('click', clickHandler);
button.addEventListener('mousedown', clickHandler);
button.addEventListener('mouseup', clickHandler);

a.addEventListener('click', clickHandler);
a.addEventListener('mousedown', clickHandler);
a.addEventListener('mouseup', clickHandler);

function clickHandler(e) {
	e.preventDefault();
	code.innerText += `${e.type} `;
  
  window.setTimeout(function () {
  	code.innerText = '';
  }, 1000);
}