JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<title>Hixie Keyboard — Shiny Demos</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
	<div class="cable"></div>
	<div class="device">
		<p class="lcd" id="lcd">_</p>
		<div class="display">
			<video preload width="170" height="220" class="video" id="video">
				<source src="http://media.shinydemos.com/hixie-keyboard/hixie.mp4" type="video/mp4">
				<source src="http://media.shinydemos.com/hixie-keyboard/hixie.webm" type="video/webm">
				<source src="http://media.shinydemos.com/hixie-keyboard/hixie.ogv" type="video/ogg">
			</video>
			<!-- Video © 2008 Google, CC-BY -->
		</div>
		<ul class="keyboard" id="keyboard">
			<li class="row first">
				<button class="key" id="key-q" data-text="&lt;q&gt; element">Q</button><button class="key" id="key-w" data-text="web workers">W</button><button class="key" id="key-e" data-text="&lt;embed&gt;">E</button><button class="key" id="key-r" data-text="&lt;ruby&gt;">R</button><button class="key" id="key-t" data-text="&lt;track&gt;">T</button><button class="key" id="key-y" data-text="yeah, what's your use case?">Y</button><button class="key" id="key-u" data-text="utf-8">U</button><button class="key" id="key-i" data-text="itemprop is better than microformats">I</button><button class="key" id="key-o" data-text="&lt;output&gt;">O</button><button class="key" id="key-p" data-text="postmessage &lt;progress&gt; pattern placeholder">P</button>
			</li>
			<li class="row second">
				<button class="key" id="key-a" data-text="&lt;article&gt;">A</button><button class="key" id="key-s" data-text="&lt;section&gt;">S</button><button class="key" id="key-d" data-text="&lt;details&gt;">D</button><button class="key" id="key-f" data-text="&lt;figure&gt; and &lt;figcaption&gt;">F</button><button class="key" id="key-g" data-text="geolocation isn't really part of html5">G</button><button...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}