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 current 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 hide">
                <h3>Downtown</h3>
            </div>
            <div class="location-title bay-area hide">
                 <h3>Bay Area</h3>
            </div>
            <div class="location-title katy hide">
            ...

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;
}
.show, .view {
    display: block !important;
}
.panel.show {
    border:none !important;
}
div.location-title {
    background: #DA322A;
    color: #fff !important;
    width: 150px;
    display: inline-block;
    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

$('a.location').click(function (event) {
        var loc = this.id;
        if ($('div.panel').hasClass('list')) {
            $('div.' + loc).removeClass('current');
            $('.list').addClass('current');
        }
        $('.list').removeClass('current');
        $('div.panel.' + loc).addClass('current');
        event.preventDefault();
    }); //click function
    $('.back-list').click(function (e) {
        $('.panel').removeClass('current');
        $('.list').addClass('current');
        $('div.location-title.show').removeClass('show').addClass('hide');
        $('div.location-title.view').removeClass('view');
        e.preventDefault();
    }); //back button


$('ul.locations li > a').hover(

function () {
    //show location hover
    var dot = this.id;
    $('div.location-title.' + dot).removeClass('hide').addClass('show');

}, function () {
    var dot = this.id;
    //hide location hover
    $('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
    var dot = this.id;
    if (!$('div.location-title.' + dot).hasClass('hide')) {
        $('div.location-title.' + dot).addClass('view');
    } else {
        $('div.location-title.' + dot).removeClass('view');
    }
    event.preventDefault();
});

$('.map__container > span').on({
    mouseover: function () { //mouseover
        var loc = $(this).attr('class');
        $('.panel').siblings().removeClass('current'); //resets all classes that have current
        $('.list').removeClass('current');
        $('div.panel.' + loc).addClass('current');
        $('div.show').removeClass('show').addClass('hide');
        $('div.location-title.' + loc).removeClass('hide').addClass('show');
        var asb = $('.location-title').siblings();
        $('div.location-title').siblings().removeClass('view');
    },
    mouseout: function () { //mouseout
        var loc = $(this).attr('class');
        $('div.' + loc).removeClass('current');
        $('div.location-title.' +...