JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper" id="wrapper">
  <div class="americassoundmap" id="americassoundmap"> 
    <div class="americassoundmap_image" id="americassoundmap_image">    
      <img src="http://40.media.tumblr.com/d8e8b561f67d2a68c2675b6e1baadb5f/tumblr_no76qlm55E1tyc2lxo1_500.png" alt="americassoundmap_map" usemap="#americassoundmap_map">
      <map name="americassoundmap_map">
        <span class="drop_alaska" title="alaskan_musician">
          <span><!-- PARENT UNNAMED SPAN -->
            <div class="alaskan_drop" id="alaskan_drop">
              <area shape="rect" coords="12,42,85,76" alt="alaska">
              <a href="alaska_musician_link.php">
                <img src="https://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG" width="200" height="150"/>
                <iframe width="200" height="150" src="https://www.youtube.com/embed/mLhXarmtndQ" frameborder="0" allowfullscreen></iframe>
              </a>
              <div class="biotext_alaska" id="biotext_alaska">
                <br/>An Alaskan Musician's Bio<br/>does anyone have anything to say about alaskan musicians?<br/>they might!!!
              </div><!-- end .biotext_alaska -->
            </div><!-- end .alaskan_drop --> <!-- THIS </div> TAG WAS OMITTED, I ADDED IT BACK IN -->
          </span><!-- END PARENT UNNAMED SPAN -->
        </span><!-- end .drop_alaska -->
        <div class="separator" id="separator">
          <span></span>
        </div><!-- end .separator -->
        <span class="drop_brazil" title="brazillian_drop">
          <span><!-- (FORMERLY) NESTED UNNAMED SPAN -->
            <div class="brazil_drop" id="brazil_drop">
              <area shape="rect" coords="315,266,400,351" alt="brazil">
              <a href="brazillian_musician_link_musician_link.php">
                <img src="https://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG" width="200" height="150"/>
                <iframe width="200" height="150"...

CSS

span.drop_alaska {
    border-bottom: thin dotted;
    background: #ffeedd;
}
span.drop_alaska:hover {
    text-decoration: none;
    background: #ffffff;
    z-index: 6;
}
span.drop_alaska span {
    position: absolute;
    left: -9999em;
    margin: 2em 0 0 0em;
    padding: 1em 1em 1em 1em;
    border-style: solid;
    border-color: black;
    border-width: 1em;
    z-index: 6;
}
span.drop_alaska:hover span {
    left: 2%;
    background: #ffffff;
} 
span.drop_alaska span {
    position: absolute;
    left: -9999px;
    margin: 1em 0em 0em 0em;
    padding: 1em 1em 1em 1em;
    border-style: solid;
    border-color: black;
    border-width: 1em;
}
span.drop_alaska:hover span {
    margin: 2em 0 0 5em;
    background: #ffffff;
    z-index: 6;
}
span.drop_brazil {
    border-bottom: thin dotted;
    background: #ffeedd;
}
span.drop_brazil:hover {
    text-decoration: none;
    background: #ffffff;
    z-index: 7;
}
span.drop_brazil span {
    position: absolute;
    left: -9999em;
    margin: 2em 0 0 0em;
    padding: 1em 1em 1em 1em;
    border-style: solid;
    border-color: black;
    border-width: 1em;
    z-index: 7;
}
span.drop_brazil:hover span {
    left: 2%;
    background: #ffffff;
} 
span.drop_brazil span {
    position: absolute;
    left: -9999em;
    margin: 1em 0em 0em 0em;
    padding: 1em 1em 1em 1em;
    border-style: solid;
    border-color: black;
    border-width: 1em;
}
span.drop_brazil:hover span {
    margin: 2em 0 0 5em;
    background: #ffffff;
    z-index: 7;
}