JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://d3js.org/d3.v5.js"></script>

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

const map = new mapboxgl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      osm: {
        type: 'raster',
        tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
        tileSize: 256,
        attribution: 'Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>, under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>',
      },
    },
    layers: [{
      id: 'osm',
      type: 'raster',
      source: 'osm',
    }],
  },
  center: [-96, 37.8],
  zoom: 3,
});

const popup = new mapboxgl.Popup()
  .setLngLat([-96, 37.8])
  .setHTML('<svg class="popup-d3-svg" style="margin: 0 auto; display: block;"></svg>')
  .addTo(map);
  
const svgElement = popup.getElement().getElementsByClassName('popup-d3-svg')[0];

const svg = d3.select(svgElement)
  .attr('width', 100)
  .attr('height', 100)
  .style('background-color', 'black');

svg.append('line')
  .style('stroke', 'lightgreen')
  .style('stroke-width', 2)
  .attr('x1', 0)
  .attr('y1', 0)
  .attr('x2', 50)
  .attr('y2', 50);