JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-section">
  <h1>
    Heading here
  </h1>
</div>
<div class="d-flex">
  <div id="mapNavigation">
    <ol>
      <li id="restaurant-list-01" class="map__list__item" data-map="restaurant-01">
       Name here 01
      </li>
      <li id="restaurant-list-02" class="map__list__item" data-map="restaurant-02">
        Name here 02
      </li>
      <li id="restaurant-list-03" class="map__list__item" data-map="restaurant-03">
        Name here 03
      </li>
      <li id="restaurant-list-04" class="map__list__item" data-map="restaurant-04">
        Name here 04
      </li>
      <li id="restaurant-list-05" class="map__list__item" data-map="restaurant-05">
        Name here 05
      </li>
      <li id="restaurant-list-06" class="map__list__item" data-map="restaurant-06">
        Name here 06
      </li>
      <li id="restaurant-list-07" class="map__list__item" data-map="restaurant-07">
        Name here 07
      </li>
      <li id="restaurant-list-08" class="map__list__item" data-map="restaurant-08">
        Name here 08
      </li>
    </ol>
  </div>
  <div id="map-wrapper">
    
<svg width="100%"  viewBox="0 0 1336 942" fill="none">
<g id="Layer_2">
	<rect width="1336" height="942" fill="#D9D9D9"/>
</g>
<g id="Layer_1">
	<g id="restaurant-05" data-list="Name here 05" class="map__plot__item">
		<circle cx="554" cy="336" r="36" fill="#B93333"/>
		<path d="M547.5,340.8l3.8-0.4c0.1,0.9,0.4,1.6,1,2.1c0.5,0.5,1.2,0.8,1.9,0.8c0.8,0,1.5-0.3,2-1
			c0.6-0.7,0.8-1.6,0.8-3c0-1.2-0.3-2.2-0.8-2.8c-0.5-0.6-1.3-0.9-2.1-0.9c-1.1,0-2.1,0.5-3,1.5l-3.1-0.5l2-10.4H560v3.6h-7.2
			l-0.6,3.4c0.9-0.4,1.7-0.6,2.6-0.6c1.7,0,3.1,0.6,4.3,1.9c1.2,1.2,1.8,2.8,1.8,4.8c0,1.6-0.5,3.1-1.4,4.4
			c-1.3,1.8-3.1,2.7-5.4,2.7c-1.8,0-3.4-0.5-4.5-1.5C548.4,343.9,547.7,342.5,547.5,340.8z" fill="white" />
	</g>
	<g id="restaurant-03" data-list="Name here 03" class="map__plot__item">
		<circle cx="732" cy="320" r="36" fill="#B93333"/>
		<path...

CSS

body {
  margin: 0;
  padding: 0;
}
#top-section {
  height: 250px;
  background: red;
}

h1 {
  color: white;
  text-align: center;
  font-size: 40px;
  line-height: 40px;
  font-family: Arial;
}
#map-wrapper {
  position: relative;
  width: 100%;
}

#mapNavigation {
  width: 200px;  
  flex-shrink: 0
}

#mapNavigation li {
  line-height: 25px;
}

.d-flex {
  display: flex;
}

svg {
  width: 100%;
}

#mypopup {
  width: 200px;
  height: 20px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: $dark;
  background-color: white;
  border-radius: 6px;
  position: absolute;
  display: none;
  top: 0;
  right: 0;
}

JavaScript

$( ".map__list__item" ).on( "mouseover", function() {
        var tooltipCopy = $(this).html();
        $(this).addClass('selected');
        $(this).siblings('li').removeClass('selected');
        $('#' + $(this).data('map')).addClass('selected');
        $('#' + $(this).data('map')).siblings('g').removeClass('selected');
        $("#mypopup").show().html(tooltipCopy);
    });

    $( ".map__list__item" ).on( "mouseout", function() {
        $(this).removeClass('selected');
        $(this).siblings('li').removeClass('selected');
        $('#' + $(this).data('map')).removeClass('selected');
        $('#' + $(this).data('map')).siblings('g').removeClass('selected');
        $("#mypopup").hide().empty();
    });

    $('.map__plot__item').on( "mouseover", function() {
        var tooltipCopy =  $(this).data('list');
        console.log('mouseover' + tooltipCopy);
        $(this).addClass('selected');
        $(this).siblings('g').removeClass('selected');
        $("#mypopup").show().html(tooltipCopy);
    });

    $('.map__plot__item').on( "mouseout", function() {
        $(this).removeClass('selected');
        $(this).siblings('g').removeClass('selected');
        $("#mypopup").hide().empty();
    });