JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.js"></script>
<script type="text/paperscript" canvas="myCanvas">

	//key dictionary with correspoinding colors and sounds from Howler.js
	var keyData = {
		q: {
			sound: new Howl({
	  		src: ['sounds/bubbles.mp3']
			}),
			color: '#1abc9c'
		},
		w: {
			sound: new Howl({
	  		src: ['sounds/clay.mp3']
			}),
			color: '#2ecc71'
		},
		e: {
			sound: new Howl({
	  		src: ['sounds/confetti.mp3']
			}),
			color: '#3498db'
		},
		r: {
			sound: new Howl({
	  		src: ['sounds/corona.mp3']
			}),
			color: '#9b59b6'
		},
			t: {
			sound: new Howl({
	  		src: ['sounds/dotted-spiral.mp3']
			}),
			color: '#34495e'
		},
		y: {
			sound: new Howl({
	  		src: ['sounds/flash-1.mp3']
			}),
			color: '#16a085'
		},
		u: {
			sound: new Howl({
	  		src: ['sounds/flash-2.mp3']
			}),
			color: '#27ae60'
		},
		i: {
			sound: new Howl({
	  		src: ['sounds/flash-3.mp3']
			}),
			color: '#2980b9'
		},
		o: {
			sound: new Howl({
				src: ['sounds/glimmer.mp3']
			}),
			color: '#8e44ad'
		},
		p: {
			sound: new Howl({
	  		src: ['sounds/moon.mp3']
			}),
			color: '#2c3e50'
		},
		a: {
			sound: new Howl({
	  		src: ['sounds/pinwheel.mp3']
			}),
			color: '#f1c40f'
		},
		s: {
			sound: new Howl({
	  		src: ['sounds/piston-1.mp3']
			}),
			color: '#e67e22'
		},
			d: {
			sound: new Howl({
	  		src: ['sounds/piston-2.mp3']
			}),
			color: '#e74c3c'
		},
		f: {
			sound: new Howl({
	  		src: ['sounds/prism-1.mp3']
			}),
			color: '#95a5a6'
		},
		g: {
			sound: new Howl({
	  		src: ['sounds/prism-2.mp3']
			}),
			color: '#f39c12'
		},
		h: {
			sound: new Howl({
	  		src: ['sounds/prism-3.mp3']
			}),
			color: '#d35400'
		},
		j: {
			sound: new Howl({
	  		src: ['sounds/splits.mp3']
			}),
			color: '#1abc9c'
		},
		k: {
			sound: new Howl({
	  		src: ['sounds/squiggle.mp3']
			}),
			color:...

CSS

canvas{
	width: 100%;
	background: black;
}

/*gets rid of white space around canvas*/
body, html{
	height: 100%;
	margin: 0;
}