JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.craftycomponents.com/crafty-dev.js"></script>

JavaScript

// Init Crafty:
Crafty.init(400,400);
Crafty.canvas.init();

function randomColor(min, max) {
    min = min !== undefined ? min.substr(1) : "000000";
    max = max !== undefined ? max.substr(1) : "FFFFFF";
    var c = [];
                
    c[0] = Crafty.math.randomInt(parseInt(min.substr(0, 2), 16), parseInt(max.substr(0, 2), 16));
    c[1] = Crafty.math.randomInt(parseInt(min.substr(2, 2), 16), parseInt(max.substr(2, 2), 16));
    c[2] = Crafty.math.randomInt(parseInt(min.substr(4, 2), 16), parseInt(max.substr(4, 2), 16));
        
    return 'rgb(' + c.join(',') + ')';
}

for(var i = 0; i<10; i++)
    Crafty.e("2D, Canvas, Color")
       .attr({x: i*40, y: 0, w: 40, h: 400})
       .color(randomColor("#000000","#FFFFFF"));