JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&quot;&gt;&lt;/script&gt;"></script>
<body>
<div class="interactive-map">
    <svg class="safaripark" x="0px" y="0" width="289" height="283.919px" style="position: relative;" viewBox="0 0 551 539.919" enable-background="new 0 0 551 539.919" data-placement="top" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
        <path fill="#FF1515" stroke="#000000" stroke-miterlimit="10" d="M489,0h-3h-65c0,0-24,28.46-47,32.46s-66,0-66,0l-40,18
            c0,0-92,38-100,43s-168,154-168,154v64l27,35l4,42l-9,18c0,0,8,26,9,29s42,43,42,43l69,37l32,15h90l47,9.503l45-0.044l27-5.459
            l49-10l28-13l37-32l9-4v-9l8-8l17-4v-7l20-14v-18l-7-23l7-8l-27-64l-12-91l9-27l-9-44l-3-34l5-13l-12-5L489,0z"/>
    </svg>


    <svg class="event-center" x="0px" y="0px" style="position: relative;" data-placement="top" data-toggle="popover" title="Popover title2" data-content="And here's some amazing content. It's very engaging. Right?"
	 width="247.852px" height="250px" viewBox="0 0 247.852 250" enable-background="new 0 0 247.852 250" xml:space="preserve">
        <g id="Layer_2">
            <path fill="#FF1515" stroke="#000000" stroke-miterlimit="10" d="M215.643,4.459h-1.289h-27.923c0,0-10.31,12.226-20.191,13.945
                c-9.881,1.718-28.353,0-28.353,0l-17.184,7.733c0,0-39.522,16.324-42.959,18.472S5.573,110.766,5.573,110.766v27.494l11.599,15.036
                l1.718,18.043l-3.866,7.733c0,0,3.437,11.169,3.866,12.458c0.43,1.289,18.043,18.472,18.043,18.472l29.642,15.895l13.747,6.444
                h38.663l20.191,4.082l19.332-0.019l11.599-2.345l21.05-4.296l12.029-5.585l15.895-13.747l3.866-1.718v-3.866l3.437-3.437
                l7.303-1.718v-3.007l8.592-6.014v-7.733l-3.007-9.881l3.007-3.437l-11.599-27.494l-5.155-39.093l3.866-11.599l-3.866-18.902
               ...

CSS

svg:hover {
            opacity: .6;
        }

        .safaripark {
            top: 200px;
        }

        .event-center {
            top: 100px;
        }

        .popover{
            position: absolute;
            /*top: 0!important;*/
        }