JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<div id="app">
  <div>

        <div class="m-1 p-1">
            <div id="mapid" style=" border: 2px dotted green !important; height:600px;"></div>
        </div>

        <ul class="ul_horiz_lis" v-show="groupedCountriesList.length" v-for="nextGroupedCountry in groupedCountriesList" :key="nextGroupedCountry.key">
            <li class="ul_horiz_lis_left_aligned p-3 m-0"
                @click.prevent="filterByGroupedCountry(nextGroupedCountry.key , nextGroupedCountry.label)">
                {{ nextGroupedCountry.key }}::{{ nextGroupedCountry.label }}
            </li>
        </ul>



  </div>
</div>

CSS

body { padding: 0; }

.editor_row {
  margin: 10px;
  padding: 8px;
}

.buttons_container {
  display:flex;
  justify-content: flex-end;
  margin: 5px;
  padding: 0;
  max-height: 70px !important;
}

.buttons_container > .btn-primary {
  margin-left: 40px;
  margin-right: 40px;
}

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        leaflet: null,
        current_zoom: 5,
        centeredPoint: [48, 2],
        countriesList: {  
            "DE": "Germany",
            "GB": "Great Britain"
        },
        
        layerGroupsMarkersArray: [],
        layerGroupsPolylinesArray: [],

        groupedCountriesList:[ { "key": "DE", "label": "Germany" }, { "key": "GB", "label": "Great Britain" } ],
        groupedAdLocations : [ { "country": "DE", "adLocations": [ { "id": 9, "ad_id": 2, "location": "Berlin", "lat": "52.52000800", "lng": "13.40495400", "color": "#c11a1a", "content": "content text #1 point at Berlin Lorem image amet", "ordering": 4, "opened": 1, "featured": 0, "country": "DE", "image": "berlin.jpg", "image_info": "Berlin Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", "created_at": "2020-06-15 10:48:02" }, { "id": 10, "ad_id": 2, "location": "Hamburg", "lat": "53.55108600", "lng": "9.99368200", "color": "#38a938", "content": "content text #2 point at Hamburg Lorem image amet", "ordering": 3, "opened": 0, "featured": 0, "country": "DE", "image": "hamburg.jpeg", "image_info": "Hamburg Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", "created_at": "2020-06-15 10:48:02" }, { "id": 11, "ad_id": 2, "location": "Munich", "lat": "48.13512400", "lng": "11.58198100", "color": "#c11a1a", "content": "content text #1 point at Munich Lorem image amet", "ordering": 2, "opened": 1, "featured": 0, "country": "DE", "image": "munich.jpg", "image_info": "Munich Montage image lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", "created_at": "2020-06-15 10:48:02" }, { "id": 12, "ad_id": 2, "location": "Stuttgart", "lat": "48.77584500", "lng": "9.18293200", "color": "#38a938", "content":...