JSFiddle - React, Tailwind, and code Playground

HTML

<div id="g"></div>
<div id="shine"></div>
<canvas id="c"></canvas>

<audio preload="true" id="snd">
        <source src="http://www.mcalister.ch/lab/colorpong/c.wav"/>
</audio>

<div id="link"><a href="http://www.lemu.ch">www.lemu.ch</a></div>

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#g{
  position:absolute;
        width:100%;
        height:100%;

        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 50%, rgba(255,255,255,0.25) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.25)));
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
        background: -o-linear-gradient(top,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
        background: -ms-linear-gradient(top,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#40ffffff',GradientType=0 );
}  

#c{
  margin:-150px 0 0 -200px;
  position:absolute;
  top:50%;
        left:50%;
  -moz-box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
  -o-box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
  box-shadow: 0 0 3px 0px rgba(0,0,0,0.4);
  border:5px solid #262626;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.15)));
}

#shine{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-195px;
    margin-top:-145px;
        z-index:9999;
        background-image:url(http://css-live.ru/Primer/tricks/bg.png);
        opacity:0.4;
}

#link{
        position:absolute;
        right:10px;
        bottom:10px;
}

#link a{
        color:#262626;
        text-shadow:0 1px 1px rgba(255,255,255,0.3);
        text-decoration:none;
        font-size:10px;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
        transition:font-size 0.2s...

JavaScript

/////////////////////////////
//     Color Pong v0.1     //
//   by Brian Mc Alister   //
//                         //
//    work in progress     //
/////////////////////////////

// init canvas
var canvas = document.getElementById("c");
var ctx= canvas.getContext("2d");
canvas.width = 400;
canvas.height = 300;

// set global vars
var score = 0;
var highscore = 0;
var collision = false;
var fl = 0;
var fr = 0;
var logo = new Image();   // Create new img element
logo.src = "http://css-live.ru/Primer/tricks/lemu.png";
snd =  document.getElementById("snd");

// function for random color
function randcol(){

  // random 70 through 255 (so its never too dark)
  var start = 70;
  return start + Math.round(Math.random() * (255-start));
}

// initialize objects
var bar = {
  height: 5,
  width: 70,
  x: 0,
  y: canvas.height-this.height,
  r: 255,
  g: 255,
  b: 255
}

var ball = {
  y: 0,
  x: 0,
  width: 5,
  height: 5,
  speedx: 200,
  speedy: -200
}

var ball2 = {
  width: ball.width,
  height: ball.height,
  x: ball.width*2*(-1),
  y: ball.height*2*(-1),
  r: 255,
  g: 255,
  b: 255,
  a: 1
}

var reset = function () {

  //initialize bar on left
  bar.x=0;
  bar.y=canvas.height-bar.height;

  //set speed so ball goes up first
  ball.speedy = -200;
  ball.speedx = 200;

  // reset score
  score = 0;

  // Place ball on screen randomly (halfway on y axis)
  ball.x = (Math.random() * (canvas.width - 5));
  ball.y = (canvas.width/2)-(ball.height/2);
};

function resetball2(){
  // hide ball2
  ball2.x=ball2.width*(-1);
  ball2.y=ball2.height*(-1);

  //set same size as ball
  ball2.width=ball.width;
  ball2.height=ball.height;

  // get random color
  ball2.r = randcol();
  ball2.g = randcol();
  ball2.b = randcol();

  // set alpha = 1
  ball2.a = 1;
}

// function for updating bar X position
function follow(e)
{
  v = e.pageX - canvas.offsetLeft -bar.width/2;
  if (v < 0){v = 0;}
  if (v > canvas.width-bar.width){v = canvas.width-bar.width;}

  bar.x = v;
}

//...