JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
svg.append("foreignObject")
    .attr("x",100)
    .attr("y",100)
    .attr("width", 480)
    .attr("height", 500)
  .append("xhtml:div")
    //.style("font", "14px 'Helvetica Neue'")
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. ");
</script>

CSS

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,500,600,700');

sup {
  font
    vertical-align: 5px;
    font-size: 10px;
}

h1 {color:red; font-size:20px;}