JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en" />
    <title>Gradient Background</title>
    
      <script src="http://code.jquery.com/jquery-latest.js"></script>


</head>

<body onload="drawGradient();">
    <div id="fadeBandsV"></div>
    <div id="pageContent">
        <h1>A test heading</h1>
        <p>Some words here... the links to change the background are here:</p>
        <p><a onclick="changetoYellow()">Change to Yellow</a> | <a onclick="changetoBlue()">Change to Blue</a> | <a onclick="drawGradient()">Back to Red</a></p>
    </div>
</body>
</html>

CSS

body {
            padding: 0px;
            margin: 20px;
            background-color: black;
        }

        #fadeBandsV {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        #fadeBandsV div {
            overflow: hidden;
            position: absolute;
            width: 100%;
        }

        #pageContent {
            position: relative;
            z-index: 2;
            color:white;
        }

JavaScript

<!--
        // do not call this function directly - use createGradientV or createGradientH instead
        function createGradient(direction, args) {
            var bandSets = args.length / 4;
            var startPos = 0;

            for (var bandSetLoop=0; bandSetLoop<bandSets; bandSetLoop++) {
                fadeFromColour = args[bandSetLoop * 4];
                fadeToColour = args[bandSetLoop * 4 + 1];
                bandSize = args[bandSetLoop * 4 + 2];
                fadeSteps = args[bandSetLoop * 4 + 3];

                // calculate stepped colour values for each band
                var colourSteps = [fadeFromColour.concat()];                // ensure first colour is the start colour
                for (var bandLoop=1; bandLoop<fadeSteps; bandLoop++) {
                    colourSteps[bandLoop] = [];
                    for (var rgbLoop=0; rgbLoop<3; rgbLoop++) {
                        colourSteps[bandLoop][rgbLoop] = Math.round(colourSteps[bandLoop-1][rgbLoop] + ((fadeToColour[rgbLoop] - colourSteps[bandLoop-1][rgbLoop]) / (fadeSteps - bandLoop)));
                    }
                }

                // now draw each band
                if (direction == 'V') {
                    for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                        document.getElementById('fadeBandsV').appendChild(aDiv = document.createElement('div'));
                        aDiv.style.height = bandSize + 'px';
                        aDiv.style.top = startPos + (bandSize * bandLoop) + 'px';
                        aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
                    }
                } else {
                    for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                        document.getElementById('fadeBandsH').appendChild(aDiv = document.createElement('div'));
                        aDiv.style.width = bandSize + 'px';
         ...