JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>黑客帝国代码雨</title>
        <style type="text/css">
            html,body{width: 100%;height: 100%;}
            body{
                background: #000;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="cvs"></canvas>
        <script type="text/javascript">
            var cvs = document.getElementById("cvs"); 
            var ctx = cvs.getContext("2d");
            var cw = cvs.width = document.body.clientWidth;
            var ch = cvs.height = document.body.clientHeight; 
            //动画绘制对象
            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            var codeRainArr = []; //代码雨数组
            var cols = parseInt(cw/14); //代码雨列数
            var step = 25 ;    //步长，每一列内部数字之间的上下间隔
            ctx.font = " 14px microsoft yahei"; //声明字体，个人喜欢微软雅黑
            //创建代码雨
            function createCodeRain() {
                for (var n = 0; n < cols; n++) {
                    var col = []; 
                    //基础位置，为了列与列之间产生错位
                    var basePos = parseInt(Math.random()*300);
                    //随机速度 3~13之间
                    var speed = 3;
                    //每组的x轴位置随机产生
                    var colx = parseInt(Math.random()*cw)
                    for (var i = 0; i < parseInt(ch/step)/2; i++) {
                        var code = {
                            x : colx, 
                            y : -(step*i)-basePos, 
                            speed : speed, 
                           // text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1
                          text : ["徐婷","人生若只如初见"]//[parseInt(Math.random()*11)] //随机生成字母数组中的一个
                        }
                        col.push(code);  
                    }
  ...