JSFiddle - React, Tailwind, and code Playground

CSS

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

path {
    fill: none;
    stroke: black;
}

svg {
    display: block;
    width: 100%;
    height: 100%;
}

svg .data-point {
    stroke: blue;
    stroke-width: 1.5px;
    fill: blue;        
}

svg .data-point-text {
    font-family: sans-serif;
    font-size: 11px;
    fill: red;
}

svg .axis path, 
svg .axis line {
    fill: none;
    stroke: black;
}

svg .axis text {
    font-family: sans-serif;
    font-size: 10px;
}

JavaScript

// Define the resolution
var width = 500;
var height = 400;    

// Create the SVG 'canvas'
var svg = d3.select("body")
    .append("svg")
    .attr("viewBox", "0 0 " + width + " " + height);

// First dataset
var datasetBottom = [
    { date: new Date(2013, 17, 2), value: 2 },
    { date: new Date(2013, 17, 3), value: 3 },
    { date: new Date(2013, 17, 4), value: 4 },
    { date: new Date(2013, 17, 5), value: 6 },
    { date: new Date(2013, 17, 6), value: 7 },
    { date: new Date(2013, 17, 7), value: 5 }
];

// Second dataset
var datasetTop = [
    { date: new Date(2013, 17, 2), value: 3 },
    { date: new Date(2013, 17, 3), value: 5 },
    { date: new Date(2013, 17, 4), value: 1 },
    { date: new Date(2013, 17, 5), value: 3 },
    { date: new Date(2013, 17, 6), value: 9 },
    { date: new Date(2013, 17, 7), value: 5 }
];

// Define the padding around the graph
var padding = 5;

// Set the scales
var xScale = d3.time.scale()
    .domain([d3.min(datasetTop, function(d) { return d.date; }), d3.max(datasetTop, function(d) { return d.date; })])
    .range([padding, width - padding]);

// Bottom y scale
var yScaleBottom = d3.scale.linear()
    .domain([0, d3.max(datasetBottom, function(d) { return d.value; })])
    .range([height/2 - padding, padding]);

// Top y-scale
var yScaleTop = d3.scale.linear()
    .domain([0, d3.max(datasetTop, function(d) { return d.value; })])
    .range([height/2 - padding, padding]);

// x-axis
var format = d3.time.format("%d %b");

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickFormat(format)
    .ticks(d3.time.days, 1);

var topchart = svg.append("g").attr("class", "topchart");
var bottomchart = svg.append("g").attr("class", "bottomchart").attr("transform", "translate(0," + height/2 + ")");

bottomchart.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + (height/2 - padding) + ")")
    .call(xAxis);

// y-axis for bottom chart
var yAxisBottom = d3.svg.axis()
   ...