JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.js"></script>
<div id="chart">

</div>

CSS

#chart svg rect.box-shadow{
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));      
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
  }

JavaScript

var items = [
    {x : 50, y : 10},
    {x : 100, y: 170},
    {x : 320, y: 70}
];

// we can increase this, everything will scale up with us
var w=760,h=500,
    svg=d3.select("#chart")
        .append("svg")
        .attr("width",w)
        .attr("height",h);

// for each rendered node, apply #drop-shadow filter
var item = svg.selectAll("rect")
    .data(items)
  .enter().append("rect").classed('box-shadow', true)
    .attr("width", 170)
    .attr("height", 100)
    .attr("fill", "steelblue")
    .attr("stroke-width", 2)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });