JSFiddle - React, Tailwind, and code Playground

CSS

.chart {
  background: #fff;
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}
.chart text {
    fill: black;
}
.axis line, .axis path {
    fill: none;
    stroke: #fff000;
    shape-rendering: crispEdges;
}

.axis text {
    text-shadow: 0 1px 0 #fff000;
    cursor: move;
}

JavaScript

// Define identity (1:1) scales
var x = d3.scale.identity().domain([0,450]);
var y = d3.scale.identity().domain([0,300]);
 
// Define container
var chart = d3.select("body")
  .append("svg")
    .attr("class", "chart")
    .attr("width", 490)
    .attr("height", 330)
    .append("g")
      // move 0,0 slightly down and right to accomodate axes
     .attr("transform", "translate(30,20)");
 
// Draw X-axis grid lines
chart.selectAll("line.x")
  .data(x.ticks(10))
  .enter().append("line")
  .attr("class", "x")
  .attr("x1", x)
  .attr("x2", x)
  .attr("y1", 0)
  .attr("y2", 300)
  .style("stroke", "#ccc");
 
// Draw Y-axis grid lines
chart.selectAll("line.y")
  .data(y.ticks(10))
  .enter().append("line")
  .attr("class", "y")
  .attr("x1", 0)
  .attr("x2", 450)
  .attr("y1", y)
  .attr("y2", y)
  .style("stroke", "#fff000");
 
// Define stock x and y axis
var xAxis = d3.svg.axis().scale(x).orient('top');
var yAxis = d3.svg.axis().scale(y).orient('left');
 
chart.append('g')
  .attr("class", "axis")
  .call(xAxis);
 
chart.append('g')
  .attr("class", "axis")
  .call(yAxis);