JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text">Windows 8 CSS Buttons<div style="font-size: 15px; float: right; clear:both;">v1.1</div></div>
	<div id="smalltext">Full suite of Windows 8 buttons</div>
	<div id="content">
		<ul class="buttons-icon">
			<li><input type="submit" id="w8-red" name="w8-red" class="w8-icon red" value=""/></li>
			<li><input type="submit" id="w8-green" name="w8-green" class="w8-icon green" value=""/></li>
			<li><input type="submit" id="w8-pink" name="w8-pink" class="w8-icon pink" value=""/></li>
			<li><input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-icon d-blue" value=""/></li>
			<li><input type="submit" id="w8-yellow" name="w8-yellow" class="w8-icon yellow" value=""/></li>
			<li><input type="submit" id="w8-l-blue" name="w8-l-blue" class="w8-icon l-blue" value=""/></li>
			<li><input type="submit" id="w8-violet" name="w8-violet" class="w8-icon violet" value=""/></li>
			<li><input type="submit" id="w8-grey" name="w8-grey" class="w8-icon grey" value=""/></li>
		</ul>
		<ul class="buttons">
			<li><input type="submit" id="w8-red" name="w8-red" class="w8-button red" value="Apply Settings"/></li>
			<li><input type="submit" id="w8-green" name="w8-green" class="w8-button green" value="Apply Settings"/></li>
			<li><input type="submit" id="w8-pink" name="w8-pink" class="w8-button pink" value="Apply Settings"/></li>
			<li><input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button d-blue" value="Apply Settings"/></li>
			<br/><br/>
			<li><input type="submit" id="w8-yellow" name="w8-yellow" class="w8-button yellow" value="Apply Settings"/></li>
			<li><input type="submit" id="w8-l-blue" name="w8-l-blue" class="w8-button l-blue" value="Apply Settings"/></li>
			<li><input type="submit" id="w8-violet" name="w8-violet" class="w8-button violet" value="Apply Settings"/></li>
			<li><input type="submit" id="w8-grey" name="w8-grey" class="w8-button grey" value="Apply Settings"/></li>
		</ul>
		<ul class="buttons">
			<li><input type="submit" id="w8-red"...

CSS

/*
 * Windows 8 CSS Buttons
 *
 * @author: Francisco Neves
 */

/** Reset */
* { color: white; margin: 0; padding: 0; outline: 0; text-decoration: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; }

/**
 *  ==== Windows 8 Buttons Style ====
 */
 	/** (Comment if you don't like transition) Transition */
 	.w8-button, .w8-icon { transition: 0.2s all ease; -moz-transition: 0.2s all ease; -webkit-transition: 0.2s all ease; -o-transition: 0.2s all ease; -ms-transition: 0.2s all ease; }

 	/** Fonts */
 	@font-face {
	    font-family: 'open_sans_lightregular';
	    src: url('../fonts/opensans-light-webfont.eot');
	    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/opensans-light-webfont.woff') format('woff'),
	         url('../fonts/opensans-light-webfont.ttf') format('truetype'),
	         url('../fonts/opensans-light-webfont.svg#open_sans_lightregular') format('svg');
	    font-weight: 800;
	    font-style: normal;
	}

 	/** Buttons */
 	.w8-button { display: table; padding: 15px 15px 8px 15px; border: none; font-family: "open_sans_lightregular"; font-size: 13px; font-weight: bold; cursor: pointer; opacity: 0.9; }
 	.w8-icon { display: table; padding: 7px 7px 7px 7px; border: none; background: url(../images/win.png) no-repeat center; cursor: pointer; opacity: 0.9; width: 48px; height: 48px; }
 	.w8-button:hover, .w8-icon:hover { opacity: 1; }	
 	.w8-button:active, .w8-icon:active { color: white !important; background-color: #191919 !important; }

 	.w8-button.iconize { padding-right: 50px !important; background: url(../images/win.png) no-repeat 115px center; }

	.w8-button.red, .w8-icon.red { background-color: #d9522c; }
	.w8-button.green, .w8-icon.green { background-color: #009900; }
	.w8-button.pink, .w8-icon.pink { background-color: #ae193e; }
	.w8-button.d-blue, .w8-icon.d-blue {...