JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="#">
        <script src="https://d3js.org/d3.v6.js"></script>
        <title>Mark's Resume</title>
    </head>
    <body>
        <svg id=name_container></svg>    
        <script src=index.js></script>
    </body>
</html>

JavaScript

const name_ = d3.select('#name_container');

const M = name_
  .append('text')
    .attr('y', 50)
    .attr('x', 50)
    .attr('opacity', 0)
    .attr('font-size', '2em')
    .text('M')
    .attr('fill', 'blue')
    .style('pointer-events', 'none');


const M_backboard = name_
    .append('rect')
    .attr('x', 50)
    .attr('y', 50)
    .attr('width', 50)
    .attr('height', 50)
    .on('mouseover', function() {
      M.transition()
        .duration(1000)
          .attr('opacity', 0);
    })
    .on('mouseout', function() {
      M.transition()
        .duration(1000)
          .attr('opacity', 1);
    });