JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
</body>

JavaScript

var svg = d3.select("body").append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 960 600")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("style", "outline: thin solid black;")
    .style("background-color", "#f4f3f1");


var group = svg.append('g')
        .datum({x: 0, y: 0});
        
group.append("rect")
        .data([{x: 200, y: 200, width: 400, height: 200}])
        .attr("id", "base")
        .attr("x", function (d) {return d.x;})
        .attr('y', function (d) {return d.y;})
        .attr('width', function (d) {return d.width;})
        .attr('height', function (d) {return d.height;})
        .attr("fill", "skyblue");
        
var inp = group.append("foreignObject")
				.attr("width", 400)
    		.attr("height", 300)
				.attr('x', 200)
        .attr( 'y', 200)
        .append("xhtml:body")
        .attr('xmlns','http://www.w3.org/1999/xhtml')
        .append('textarea')
        .style("font-size" , "20px")
        .style("overflow", "hidden")