JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer" style="">
  <div class="" id="footer-message">
  </div> 
  <div class="region clear-block" id="footer-region">
    <div id="footermap">
      <ul>
        <li class="menu-1780 menu-model-s">
          <a href="/models">Model S</a>
        </li>
      </ul>
      <ul class="quicklinks">
        <li><a href="/about/careers">Careers</a></li>
        <li><a href="/about/press">Press</a></li>    
      </ul>
    </div>
    <div class="locale-tab" id="region-picker" style="width: 132px;">
      <span class="marginUnitedStates tk-museo-sans locale-select-lable">United States</span>
      <div class="inside">
          &nbsp;
      </div>
    </div>
    <div class="dropshadow-dark" id="locale-select" style="top: 193px; display: none;">
       <!--This is a comment. Comments are not displayed in the browser-->
 
    <!--  <div class="locale-tab" id="select-tab" style="width: 132px;"> -->
   <!--     <span class="en_US tk-museo-sans">SELECT COUNTRY</span> -->
  <!--    </div> -->
 
        
      <h1 class="popupHeader">international newsstands</h1>
        <div class="selectorContinents">north america</div>
        <div class="borderNorthAmerica">
            <a rel="en_CA" class="selectorCountries marginUnitedStates locale-link" href="http://www.teslamotors.com/en_CA">united states</a>
            <a rel="en_US" class="selectorCountries marginSecondCountry locale-link" href="http://www.teslamotors.com/en_CA">canada</a>
            <a rel="en_BE" class="selectorCountries marginCanadaFrench locale-link" href="http://www.teslamotors.com/en_BE">canada(french)</a>
        </div>
        <div class="selectorLatinAmerica">latin america</div>
        <div class="borderLatinAmerica">
            <a rel="en_z" class="selectorCountries locale-link">argentina</a>
            <a rel="en_x" class="selectorCountries marginBrasil locale-link">brasil</a>
            <a rel="en_c" class="selectorCountries marginMexico locale-link">mexico</a>
        </div>
        <div...

CSS

#footer #footer-region div.locale-tab {
    padding: 0 0 0 5px;
}
#region-picker {
    background: url("http://www.teslamotors.com/tesla_theme/images/bg_footer_locale_tab.png") repeat-x scroll 0 0 transparent;
    bottom: 0;
    color: #FFFFFF;
    cursor: pointer;
    height: 30px;
    left: 811px;
    overflow: hidden;
    position: absolute;
}

.style-header, .tk-museo-sans {
    font-family: "museo-sans-1","museo-sans-2",sans-serif;
}
.style-header, .tk-museo-sans {
    font-family: "museo-sans-1","museo-sans-2",sans-serif;
}
#region-picker .inside {
    padding: 22px 5px 10px;
}
#locale-select {
    background-color: #FFFFFF;
    /*
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #C90000;
    */
    margin: 0 auto;
    min-height: 425px;
    /*padding: 20px 20px 0;*/
    padding-left: 40px;
    padding-top: 30px;
    position: absolute;
    width: 775px;
    z-index: 599;
}
.dropshadow-dark {
    /*box-shadow: 2px 2px 2px #e4e2dc;*/
    border: 5px solid #e4e2dc;
}

#footer #footer-region div.locale-tab {
    padding: 0 0 0 5px;
}
#locale-select #select-tab {
    background: url("http://www.teslamotors.com/tesla_theme/images/bg_footer_locale_tab.png") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    cursor: pointer;
    height: 30px;
    left: 810px;
    overflow: hidden;
    position: absolute;
    top: -40px;
    z-index: 600;
}
.quicklinks{
 /*height: 800px;*/
}

.selectorCountries{

    cursor:pointer;
    font-size: 11px;
    border: 1px solid red;
    /*
    background: url("http://www.teslamotors.com/tesla_theme/images/icn_us_flag_no_shadow.png") no-repeat scroll 0 45% transparent;
    */
    padding-left: 30px;
        padding-right: 70px;
    text-transform:capitalize;
    /*padding-bottom: 40px;*/


}
.selectorContinents{
    font-size: 12px;
    padding-top: 40px;
    text-transform:capitalize;
    height: 12px;
}
.selectorLatinAmerica, .selectorAfrica, .selectorEurope, .selectorAsia, .selectorAfrica{
    font-size: 12px;
   ...

JavaScript

// locale selector actions
    $('#region-picker').click(function(){
            if ($("#locale-select").is(":visible")) return closeSelector('slide');

        
        var foot_height = $('#footer').innerHeight();
        var foot_height_css = foot_height-1;
        var select_position = '-=' + (Number(700)+18);
        console.log("hallo"+select_position);
        var $selector = $('#locale-select');
        $('#locale_pop').fadeOut();
        $selector.css({top:foot_height_css});
        $selector.fadeIn(function(){
            $(this).addClass('open');
            $(this).animate({top:select_position}, 1000);
            });
    });
    $('#select-tab').click(function(e){
        e.stopPropagation()
        closeSelector('slide');
        });
    // don't hide when clicked within the box
    $('#locale-select').click(function(e){
        e.stopPropagation();
    });
    $(document).click(function(){ 
        if ($('#locale-select').hasClass('open')) {
            closeSelector('disappear');
        }
    });

    $('.locale-link').click(function(){
        //var $clicked = $(this); //"$(this)" and "this" is the clicked span
        $(".locale-select-lable").html($(this).html());
        //search for "marginXXXXX"
        var flags = $(this).attr("class").match(/(margin\w+)\s/g);
        //create new class; add matching value if found
        var flagClass = "tk-museo-sans locale-select-lable" + (flags.length ? " " + flags[0] : "");
        //set new class definition
        $(".locale-select-lable").attr("class", flagClass);
        
        closeSelector('disappear');

        //if ($("#locale-select").is(":visible")) return closeSelector('slide');
       /*         
       // var desired_locale = $(this).attr('rel');
       // createCookie('desired-locale',desired_locale,360);
       // createCookie('buy_flow_locale',desired_locale,360);
        //closeSelector('disappear');
        */
    });  /* CORRECTED */

    $('#locale_pop...