JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
 <div id="container"></div>

CSS

#container {
 height: 100%;
 width: 100%;
}

svg {
    background: yellow;
    width: 1324px;
    height: 324px;
}

.node {
  fill: #FFFFFF;
 }

JavaScript

let svg = d3.select("#container")
        .append("svg");

		svg.select("defs")
        .append("svg:filter")
        .attr("id", "nodeShadow")
        .append("feDropShadow")
        .attr("dx", 0.5)
        .attr("dy", 3.2)
        .attr("stdDeviation", 3)
        .attr("flood-opacity", 0.3)
        .attr("flood-color", "lightgray");
        
         svg.select("defs")
        .append("svg:filter")
        .attr("id", "circleShadow")
        .append("feDropShadow")
        .attr("dx", 2.0)
        .attr("dy", 1.6)
        .attr("stdDeviation", 4)
        .attr("flood-color", "lightgray");
        
    // node
    let containerNode = svg.append("g");

    containerNode.append("rect")
        .attr("x", 100)
        .attr("y", 150)
        //.attr("filter", "url(#nodeShadow)")
        .attr("fill", "#FFFFFF")
        .attr("width", 250)
        .attr("height", 30);

    containerNode.append("circle")
        .attr("cx", 115)
        .attr("cy", 165)
        .attr("r", 15)
        .attr("fill", "transparent")
        //.attr("filter", "url(#circleShadow)")
        .attr("stroke", "#ffffff")
        .attr("stroke-width", "0.001")
        .attr("width", 30)
        .attr("height", 30);