JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//d3js.org/d3.v3.min.js"></script>

JavaScript

var width = 640, height = 300;

var svg = d3.select("body").append("svg")
  .attr("width", width).attr("height", height);
    
var projection = d3.geo.albers()
  .scale(600).center([0, 38])
  .translate([width / 2, height / 2]);
        
var ocean = svg.append("path")
  .attr('fill', 'lightblue');
  
var states = svg.append("path")
  .attr('fill', '#ccc')
  .attr('stroke-width', 1)
  .attr('stroke', '#222');
  
d3.json("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_ocean.geojson", function(error, data) {
  ocean.datum(data).attr("d", d3.geo.path().projection(projection))
});
    
d3.json("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson", function(error, data) {
  states.datum(data)
  	.attr("d", d3.geo.path().projection(projection));
});