JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map__wrapper">
    <div class="leftcol">
        <div class="map__content">
            <p class="intro">Hover over the map or location list and click your preferred location for more details.</p>
            <div class="panel clicked list" id="main">
                <ul class="locations">
                    <li><a href="#" class="location" id="downtown">Downtown</a></li>
                    <li><a href="#" class="location" id="bay-area">Bay Area</a></li>
                    <li><a href="#" class="location" id="katy">Katy</a>    </li>
                    <li><a href="#" class="location" id="memorial-city">Memorial City</a></li>
                </ul>
            </div>
            <!--/ main -->
            <div class="panel downtown">
                 <h3>Downtown</h3>
                <p>« <a href="#" class="back-list">Return to location list</a></p>
            </div>
            <!--/.texas-medical-center -->
            <div class="panel bay-area">
                 <h3>Bay Area</h3>
                <p>« <a href="#" class="back-list">Return to location list</a></p>
            </div>
            <!--/.Bay Area -->
            <div class="panel katy">
                 <h3>Katy</h3> 
                <p>« <a href="#" class="back-list">Return to location list</a></p>
            </div>
            <!--/.Katy -->
            <div class="panel memorial-city">
                 <h3>Memorial City</h3>
                    <p>« <a href="#" class="back-list">Return to location list</a></p>
            </div>
            <!--/.Memorial City -->
        </div>
        <!--/.map__content-->
    </div>
    <!--/leftcol-->
    <div class="rightcol map">
        <div class="map__container">
            <div class="location-title downtown">
                <h3>Downtown</h3>
            </div>
            <div class="location-title bay-area">
                 <h3>Bay Area</h3>
            </div>
            <div class="location-title katy">
                ...

CSS

ul.locations li {
    list-style: none;
    line-height: 26px;
}
.map__wrapper {
    padding:0px 40px;
}
.map__wrapper:after {
    content:"";
    display: block;
    min-height: 1px;
    clear:both;
}
.leftcol, .rightcol {
    width:50%;
    float:left;
}
.map__content {
    background: #DA322A;
    padding:25px 25px;
    color:#fff;
    width:75%;
}
.intro, .closure {
    line-height: 22px;
    font-size: 16px;
}
.intro {
    border-bottom:1px solid #fff;
    padding-bottom:20px;
}
.map__content a {
    color:#fff;
    text-decoration: none;
}
.panel {
    display: none;
    font-size: 14px;
    line-height: 22px;
}
.panel h3 {
    color:#fff;
    font-size:22px;
    line-height: 28px;
}
.panel ul {
    margin-left:30px;
    margin-bottom: 20px;
    margin-top:20px;
}
.panel ul li {
    margin-bottom:10px;
}
.panel.list ul {
    margin-left:0px;
    padding:0;
}
.panel.list ul li {
    margin-bottom:0px;
}
.current {
    display: block;
}
.map__container {
    position: relative;
}
.map__container span {
    display: block;
}
.map__container span:hover {
    cursor: pointer;
}
.hide {
    display: none !important;
}
.selected, .clicked {
    display: block !important;
}
.panel.show {
    border:none !important;
}
div.location-title {
    background: #DA322A;
    color: #fff !important;
    width: 150px;
    display: none;
    padding: 5px 18px;
    position: absolute;
    border: 1px solid #fff;
    text-align: center;
    z-index: 99999;
}
div.location-title h3 {
    color:#ffffff;
    font-size: 16px;
    line-height: 23px;
}
div.location-title:after, div.location-title:before {
    top: 100%;
    left: 45%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
div.location-title:after {
    border-top-color: #DA3229;
    border-width: 15px;
    margin-left: -15px;
}
div.location-title:before {
    border-top-color: #fff;
    border-width: 17px;
    margin-left: -17px;
}
/*
           ...

JavaScript

$('.map__container span').click(function(mapIcon){
                        mapIcon.preventDefault();
                        var icon = $(this).attr('class');  
                        var panel = $(this).attr('class');  

                        $('.panel').removeClass('clicked');
                        $('.location-title').removeClass('clicked');
                        $('.panel.' + panel).addClass('clicked');
                        $('.location-title.' + icon).addClass('clicked');
                    });                
                    //Show bubbles over dots on map
                    $('.map__container span').hover(function(){
                        var hoverdot = $(this).attr('class');

                        $('.location-title.' + hoverdot).toggleClass('selected');
                    });
                    //Show bubbles on hover over anchor links
                    $('a.location').hover(function(){
                        var hoverlink = this.id;

                        $('.location-title.' + hoverlink).toggleClass('selected');
                    });
                    //Anchor links show panels and bubbles
                    $('a.location').click(function(e){
                        e.preventDefault();
                        var panel = this.id;
                        var icon = this.id;

                        $('.panel').removeClass('clicked');
                        $('.location-title').removeClass('clicked');
                        $('.panel.' + panel).addClass('clicked');
                        $('.location-title.' + icon).addClass('clicked');                        
                    });
                    //back button
                    $('.back-list').click(function(backButton) {
                         backButton.preventDefault();

                        $('.panel').removeClass('clicked');
                        $('.location-title').removeClass('clicked');
                        $('.list').addClass('clicked');    ...