JSFiddle - React, Tailwind, and code Playground

JavaScript

var chart = d3.select("body").append("svg")
    .attr("height", 500)
    .attr("width", 500)
    .style("background", "lightgrey");

var group = chart.selectAll("g")
    .data(["Hello"])
    .enter()
    .append("g")
    .attr("id", function (d) { return d;});

var rect = group.append("rect")
    .attr("stroke", "red")
    .attr("fill", "blue")
    .attr("width", 200)
    .attr("height", 200)
    .attr("x", 10)
    .attr("y", 10);

var label = group.append("text")
    .attr("x", 40)
    .attr("y", 40)
    .attr("font-size", "22px")
    .attr("text-anchor", "start")
    .text(function (d) { return d;});

// Set up dragging for the entire group
var dragMove = function (d) {
    var x = d3.event.x;
    var y = d3.event.y;
    d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
};


var drag = d3.behavior.drag()
    .origin(function (data) {
        var element = d3.select("#" + data);
        return {
            x: d3.transform(element.attr("transform")).translate[0],
            y: d3.transform(element.attr("transform")).translate[1]
        };
    })
    .on("drag", dragMove);

group.call(drag);