JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <style>
        path.region:hover {
            fill: red !important;
        }
    </style>
</head>
<body>
<div> Title
</div>
<div>
    <div>
        Other title
    </div>
    <div>
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="706.680941pt" height="345.6pt" viewBox="0 0 706.680941 345.6" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <metadata>
            <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
            <cc:Work>
                <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
                <dc:date>2026-10-11T12:29:01.289660</dc:date>
                <dc:format>image/svg+xml</dc:format>
                <dc:creator>
                <cc:Agent>
                <dc:title>Matplotlib v3.7.1, https://matplotlib.org/</dc:title>
                </cc:Agent>
                </dc:creator>
            </cc:Work>
            </rdf:RDF>
        </metadata>
        <defs>
            <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>
        </defs>
            <g id="figure_1">
                <g id="patch_1">
                    <path d="
                        M 0 345.6
                        L 706.680941 345.6
                        L 706.680941 0
                        L 0 0
                        z
                    " style="
                        fill: red
                    "/>
                </g>
                <g id="axes_1">
                    <g id="patch_2">
                        <path class='mapbg' d="
                            M 0 345.6
                            L 706.680941 345.6
                            L 706.680941 0
                            L 0 0
                            z
                            " style="fill: #212830;"/>
                    </g>
                  ...