JSFiddle - React, Tailwind, and code Playground

JavaScript

var zoom = d3.behavior.zoom()
	.on("zoom", function () {
		container.attr("transform",
			"translate(" + d3.event.translate + ") " +
			"scale(" + d3.event.scale + ")");
	});

var container = d3.select("body")
                    .append("svg")
                      .attr("id", "svgcontainer")
                      .attr("width", 300)
                      .attr("height", 300)
                      .style("background-color", "#aaaaee")
                      .call(zoom)
                    .append("g");

var svg = container.append("svg")
                     .attr("width", 200)
                     .attr("height", 200)
                     .attr("x", 50)
                     .attr("y", 50);

svg.append("svg:circle")
     .style("fill", "none")
     .style("stroke", "red")
     .style("stroke-width", "2px")
     .attr("cx", 100)
     .attr("cy", 100)
     .attr("r", 50);