JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder" />

JavaScript

var paper = Raphael('holder');

var container = paper.set();

paper.rect(0, 0, '100%', '100%').attr({
    stroke: 'red'
});

var rectRedSet = paper.set();
var rectRed = paper.rect(100, 10, 20, 20).attr({
    'fill': 'red',
        'stroke-opacity': 0
});
rectRedSet.push(rectRed);
container.push(rectRedSet);

var rectBlackSet = paper.set();
var rectBlack = paper.rect(150, 10, 20, 20).attr({
    'fill': 'black',
    'stroke-opacity': 0
});
rectBlackSet.push(rectBlack);
container.push(rectBlackSet);

var rectBlueSet = paper.set();
rectBlue = paper.rect(0, 0, 20, 20).attr({
    'fill': 'blue',
        'stroke-opacity': 0
});

rectBlueSet.push(rectBlue);
rectBlueSet.transform('t50,150');
container.push(rectBlueSet);

var containerBBox = container.getBBox();
paper.rect(containerBBox.x, containerBBox.y, containerBBox.width, containerBBox.height).attr({
    stroke: 'black'
});

//trying to get the entire container and its children to move to 0,0
//commenting out the transform below will keep rectBlue in the container...?
container.transform(0,0);




//