JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
	<title>FaceKat — Shiny Demos</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="styles/style.css">
	<link rel="stylesheet" href="/styles/panel.css">
</head>
<body id="body">
	<div id="score" class="hud"></div>
	<div id="lives" class="hud"></div>
	<div id="hiscore" class="hud"></div>
	<div id="title" class="hud">FaceKat</div>
	<div id="info" class="hud"></div>
	<div id="credit">Based on <a href="http://www.omiod.com/games/fastkat.php">FastKat</a> by <a href="http://www.omiod.com">Andrea Doimo</a></div>
	<div id="but" class="grayout">
		<button id="start" class="but">WAIT</button>
	</div>
	<script src="/scripts/modernizr.js"></script>
	<script src="/scripts/panel.js"></script>
	<script src="scripts/options.js"></script>
	<script src="scripts/headtrackr.js"></script>
	<script src="scripts/ccv.js"></script>
	<script src="scripts/cascade.js"></script>
	<script src="scripts/whitebalance.js"></script>
	<script src="scripts/smoother.js"></script>
	<script src="scripts/camshift.js"></script>
	<script src="scripts/facetrackr.js"></script>
	<script src="scripts/headposition.js"></script>
	<script src="scripts/Three.js"></script>
	<script src="scripts/main.js"></script>

<script>
'use strict';var THREE=THREE||{REVISION:"48"};if(!self.Int32Array)self.Int32Array=Array,self.Float32Array=Array;
(function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];if(!window.requestAnimationFrame)window.requestAnimationFrame=function(b){var c=(new Date).getTime(),g=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+g)},g);a=c+g;return...

CSS

@font-face {
  font-family: 'Erix';
  font-style: normal;
  font-weight: normal;
  src: url('./erix_outline.ttf') format('truetype');
} /* Erix Outline font by Patrick H. Lauke http://www.splintered.co.uk/experiments/72/ */

body {
background-color: #000;
margin: 0px;
overflow: hidden;
cursor:default;
}

a {
color:#0078ff;
}

.hud {
position:absolute;
z-index:999;
color:white;
font-family: 'Erix', serif;
font-size: 100%;
font-style: normal;
}

#but {
position:absolute;
width: 100%;
margin: 0;
padding: 0;
top:50%;
left:0;
}

.but {
color:white;
font-family: 'Erix', serif;
font-size: 100%;
font-style: normal;
border-radius:0.3em;
border:0.1em solid white;
background-color: rgba(99,99,99,0.65);
cursor:pointer;
padding: 0.5em;
margin: 0 auto;
width: 8em;
/* initial start button style */
display: none;
}

.but:hover {
background-color: #404040;
}

#score {
top:10px;
right:20px;
}

#lives {
top:10px;
left:60px;
font-size:100%;
}

#hiscore {
position:absolute;
z-index:999;
top:10px;
left:0;
width:100%;
margin:0;
text-align:center;
font-size:90%;
line-height:100%;
}	

#info {
position:absolute;
z-index:999;
bottom:75px;
left:50%;
width:20em;
margin-left:-10em;
text-align:center;
font-size:60%;
line-height: 1.2;
}

small {
font-size:70%;
}

#title {
position:absolute;
z-index:999;
top:19%;
left:0;
width:100%;
text-align:center;
font-size: 200%;
}

#credit {
font-family: 'Erix', serif;
position:absolute;
bottom:1em;
width: 100%;
text-align:center;
font-size:30%;
color:#aaa;
}

#credit a { color: #f00; }

video {
position:absolute;
top: 60px;
left: 10px;
z-index:1000;
display:block;
width: 200px; height: 150px;
-o-transform : scaleX(-1);
-moz-transform : scaleX(-1);
-webkit-transform : scaleX(-1);
-ms-transform: scaleX(-1);
transform : scaleX(-1);
}

.grayout .but {
  filter:alpha(opacity=40); /* IE */
  opacity: 0.4; /* Safari, Opera */
  -moz-opacity:0.40; /* FireFox */
  cursor: default;
}