JSFiddle - React, Tailwind, and code Playground

HTML

<title>my playa</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
    <script type="text/javascript" src="map.js">
      
      var popup = L.popup();

  function onMapClick(e) {
    popup
      .setLatLng(e.latlng)
      .setContent("You clicked the map at " + e.latlng.toString())
      .openOn(mymap);¨¡'0985r4321po  '
  }

  mymap.on('click', onMapClick);
    </script>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-bar w3-white w3-wide w3-padding w3-card-2">
    <a href="#home" class="w3-bar-item w3-button"><b>My</b> playa</a>
    <!-- Float links to the right. Hide them on small screens -->
    <div class="w3-right w3-hide-small">
      <a href="#projects" class="w3-bar-item w3-button">Common riks</a>
      <a href="#about" class="w3-bar-item w3-button">About</a>
      <a href="#contact" class="w3-bar-item w3-button">Contact</a>
    </div>
  </div>

<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:2000px;" id="home">
      
<div id="mapid"></div>
</header>

<!-- Page content -->
<div class="w3-content w3-padding" style="max-width:1564px">
<div class="w3-container w3-padding-32" id="about">
        <div class="w3-container w3-padding-0" id="projects">
    <h3 class="w3-border-bottom...

CSS

.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
#mapid{
    width: 2000px;
    height: 650px;
}
@media only screen and (max-width: 1440px){
    #mapid { height: 350px }
}
@media only screen and (max-width: 1024px){
    #mapid { height: 200px }
}
@media only screen and (max-width: 425px){
    #mapid { height: 100px }
}

JavaScript

function show(){
    if(document.getElementById('combo').value == "contamination"){
        document.getElementById('combo1').style.visibility="visible";
        
    }else{
        document.getElementById('combo1').style.visibility="hidden";
    }
    if(document.getElementById('combo').value == "ambientalalert"){
        document.getElementById('combo2').style.visibility="visible";
        
    }else{
        document.getElementById('combo2').style.visibility="hidden";
    }
    if(document.getElementById('combo').value == "events"){
        document.getElementById('combo3').style.visibility="visible";
    }else{
        document.getElementById('combo3').style.visibility="hidden";
    }
    if(document.getElementById('combo').value == "ecology"){
        document.getElementById('combo4').style.visibility="visible";
    }else{
        document.getElementById('combo4').style.visibility="hidden";
    }
    if(document.getElementById('combo').value == "security"){
        document.getElementById('combo5').style.visibility="visible";
    }else{
        document.getElementById('combo5').style.visibility="hidden";
    }
}