JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="home-map">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 516" id="home-map"><style>.st1,.st3{fill:#e5e5e5;stroke:#ccc;stroke-width:.5}.st3{stroke-linejoin:round}.st4{fill:#156b38}.st5{fill:#fff;fill-opacity:0;}</style><g id="World" opacity=".3"><path id="HI" class="st1" d="M24.3 261l-.5.7.8.6.6-.9-.9-.4zm4.5 1.8l-.2.3.3.8.7-.2-.8-.9zM31 264v.6h1.6L31 264zm1.8.9l1 1.1.8-.3-1-.9h-.8zm2.2 2.5l-.3 1.6.6 2 .3.2 1.2-1H38l.1-1-1.2-1.3-1.9-.5z"/><path id="Puerto_Rico" class="st1" d="M290.3 273.4h-2.2l-.6-.9.4-.7 3.6.1.3.7-1.5.8z"/><path id="Belize" class="st1" d="M228.2 272.7l-.9-.7-.4.1-.9 1.5-1 .3-.1 5.5h1.1l1.6-2.9.6-3.8z"/><path id="Costa_Rica" class="st1" d="M240.8 294.1l-1.3.6-1.2-.7-3.5-.3-.3 1.9.6 1.3 1.7 1 .1-.8-.6-.4h.7l1.3 1.7 2.2 1 .1 1.6 1 .4.1-.7.7.9.9-2-.6-.3v-.7l.9-.6-1.9-1.6-.9-2.3z"/><path id="Cuba" class="st1" d="M263.5 264.1v1.2l2.3.1 2 1.5-3.3 1H258l-.3-.1 1.9-1.7-2.9-.6-1.7-2.5-3.5-.4-1.9-1.3-4-.3-.4-.6 1.1-.6-.6-.3h-2.3l-1.3 1-1.7.4-2 1.1-1-.3 1-.3.4-1.7 1.4-.9 3.8-1.1h2.3l4.3.6 2 1.7 2.3.3 1.7 1.3 2.3.7 1.5 1 3.1.8z"/><path id="polygon4399" class="st1" d="M257.8 261.6h-.4l-2.5-1.9 1.9.7 1 .6v.6z"/><path class="st1" d="M242.2 263l.4-1.3h.6l.3 1.1-1.3.2z"/><path id="Dominican_Republic" class="st1" d="M274.6 271.7l.1 1.6.7 1.1 2-2.3.7.9 2.7-1 2.9.6.6-1-1.3-1.2-2-.3.9-.6-1.6-.3-.6-.9-2.2-.7-3 .1.6 2-.5 2z"/><path id="El_Salvador" class="st1" d="M227.9 287.6l1.1-.6-.3-1.5H227l-2.6-1.6-1.9 2 3.9 1.6 1.5.1z"/><path id="Guatemala" class="st1" d="M224.8 279.4l.1-5.5h-4.8l-.1 1.4-1.7-.3 2.2 2 .7 1.9-2.6.1-1.9 3-.4 1.4 2.6 2 3.6.6 1.9-2 .6-.7-.1-.9 2.5-1.7.1-.7-1.4-.6h-1.3z"/><path id="polygon4409" class="st1" d="M270.7 271l-.3-.4h.7l.6.7-1-.3z"/><path id="polygon4411" class="st1" d="M271.5 267.4l.1-.1.4.3-.5-.2z"/><path id="Haiti" class="st1" d="M274.6 271.7l.1 1.6-1.2-.6-1.7.4-2.3-.6-.7.7-1.5-1.3v-.3l5.5.1.1-.6-1.1-.7-.1-1.7-1.7-.6 1.5-.7 1.7.7 1.4-.4.6 2-.6 2z"/><path id="Honduras" class="st1" d="M236.9 279.4l-9.4.6-.1.7-2.5...

SCSS

.home-map {
    svg {
        position: absolute;
        top: 80%;
        left: 42%;
        transform: translate(-50%, -50%);
        width: 200%;
    }
}

.map-popup {
    background: #eee;
    position: absolute;
    z-index: 100;
    width: 10em;
    padding: 0.5em;
}