JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>d3</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://mbostock.github.com/d3/d3.js"></script>
    </head>
    <body>
    </body>
</html>

JavaScript

body = d3.select('body')

svg = body.append('svg')
                        .attr('height', 600)
                        .attr('width', 200);
        var g = svg.append('g').attr("transform" ,"scale(0)");
        rect = g.append('rect')
                        .attr('width', 150)
                        .attr('height', 100)
                        .attr('x', 40)
                        .attr('y', 100)
                        .style('fill', 'none')
                        .attr('stroke', 'black')
        text = g.append('foreignObject')
                        .attr('x', 50)
                        .attr('y', 130)
                        .attr('width', 150)
                        .attr('height', 100)
                        .append("xhtml:body")
                        .html('<div style="width: 150px;">This is some information about whatever</div>')
        
        g.transition().duration(500).attr("transform" ,"scale(1)");