JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mydiv">
    </div>   
    
    <div>
        <p>div here</p>    
    </div>
    <div>
        <p>div here</p>    
    </div>

    <div>
        <p>div here</p>    
    </div>

    <div>
        <p>div here</p>    
    </div>

    <div>
        <p>div here</p>    
    </div>

    <div>
        <p>div here</p>    
    </div>
    <div>
        <p>Last div here</p>
        <a name="testanchor"></a> 
    </div>

</body>

CSS

/*.bubtri {
    background-image: url('http://cammac7.github.io/img/portfolio/BLM.png');
}*/

JavaScript

var width = 800;
var height = 300;
 

var svg = d3.select(".mydiv").append("svg").attr("width",width).attr("height",height);

var defs= svg.append('defs')
defs.append('pattern')
    .attr('id', 'pic1')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 100)
    .attr('height', 100)
  .append('svg:image')
    .attr('xlink:href', 'http://cammac7.github.io/img/portfolio/LRO.jpg')
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", -10);


  defs.append('pattern')
    .attr('id', 'pic2')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 100)
    .attr('height', 100)
   .append('svg:image')
    .attr('xlink:href', 'http://cammac7.github.io/img/portfolio/BubbleSoccer.jpg')
    .attr("width", 100)
    .attr("height", 120)
    .attr("x", 0)
    .attr("y", -10);


  defs.append('pattern')
    .attr('id', 'pic3')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 100)
    .attr('height', 100)
    .append('svg:image')
    .attr('xlink:href', 'http://cammac7.github.io/img/portfolio/BLM.png')
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", -10);



svg.append("a")
    .attr("xlink:href", "http://www.google.com")
    .append('path')
    .attr("overflow","hidden")
    .attr("d", d3.svg.symbol().type("triangle-up").size(10000))
    .attr("transform", function(d) { return "translate(" + 300 + "," + 200 + ") rotate(0)"; })
    .attr("fill", "url(#pic1)");

svg.append("a")
    .attr("xlink:href", "http://www.wikipedia.com")
    .append('path')
    .attr("overflow","hidden")
    .attr("d", d3.svg.symbol().type("triangle-up").size(10000))
    .attr("transform", function(d) { return "translate(" + 190 + "," + 170 + ") rotate(-60)"; })
    .attr("fill", "url(#pic2)");

svg.append("a")
    .attr("xlink:href", "#testanchor")
    .append('path')
    .attr("overflow","hidden")
    .attr("d", d3.svg.symbol().type("triangle-up").size(10000))
    .attr("transform", function(d) { return...