JSFiddle - React, Tailwind, and code Playground

by rjgunning

HTML

<script src="//use.typekit.net/uwk8rac.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="stage">
            <canvas id="canvas"></canvas>
            <div class="centered">
                <img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"></div>
            <div class="centered" style="margin-top:50px;">
                <p>SITE COMING SOON</p></div>
            <div class="centered-bottom">
                <footer>
                    <small>&copy; Copyright 2015, MAKECODEPLAY</small>
                </footer>
            </div>
        </div>

CSS

html, body { 
                margin: 0; 
                padding: 0;
                width:  100%;
                height: 100%;
            }

            html {
                background-color: "#555761";
                background: "#555761";
            }

            body {
                font-family: "brandon-grotesque";
                font-wieght: 100;
                font-style: normal;
                color: #656771;
                bgcolor: "#555761";
            }

            p {
                font-family: "brandon-grotesque";
                font-wieght: 100;
                font-style: normal;
                color: #656771;
            }

            a {
                color: #555761;
            }

            a:link {
                color: #555761;
                text-decoration: none;
            }

            a:visited {
                color: #555761;
                text-decoration: none;
            }

            a:hover {
                color: #656771;
                text-decoration: none;
            }

            a:active {
                color: #555761;
                text-decoration: none;
            }

            /* Auto center content in window */
            #stage {
                width:100%; 
                margin: 0 auto;
                padding: 0;
                } 

            #stage canvas, #overlay {
                position: absolute;
                margin: 0 auto;
                padding: 0;
                }

            #overlay {
                margin: 0 auto;
                padding: 0;
            }

            #overlay p {
                color: #333;
                font-family: "museo-sans";
                font-weight: 900;
                font-style: normal;
                font-size: 14px;
            }

            .centered {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
               ...

JavaScript

var canvas = document.getElementById('canvas');
            var makecodeplay = canvas.getContext('2d');
            canvas.width=screen.width;
            canvas.height=screen.height;

            makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
            makecodeplay.fillStyle = "rgb(75,77,81)";
            makecodeplay.fillRect(0, 0, canvas.width, canvas.height);

            function randomPaint(inX, inY) {

                var x = Math.floor(Math.random() * canvas.width);
                var y = Math.floor(Math.random() * canvas.height);
                var r, g, b;
                r = Math.floor(Math.random() * 255);
                g = Math.floor(Math.random() * 255);
                b = Math.floor(Math.random() * 255);
                makecodeplay.beginPath();
                makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
                makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
                makecodeplay.fill();
                makecodeplay.closePath();

                makecodeplay.beginPath();
                makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
                makecodeplay.lineWidth = 10;
                makecodeplay.moveTo(inX, inY);
                makecodeplay.lineTo(x, y);
                makecodeplay.stroke();
                makecodeplay.closePath();

                makecodeplay.beginPath();
                makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
                makecodeplay.lineWidth = 4;
                makecodeplay.moveTo(inX, inY);
                makecodeplay.lineTo(x, y);
                makecodeplay.stroke();
                makecodeplay.closePath();

                makecodeplay.beginPath();
                makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
                makecodeplay.lineWidth = 1;
                makecodeplay.moveTo(inX, inY);
                makecodeplay.lineTo(x, y);
                makecodeplay.stroke();
     ...