JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blank-dashboard-breadcrumb">
    
    <div id="right_arrow"> <img src="image..png"> </div>
    <div id="bc1">
        <span> ----- </span>
        <span class="dashed-circle"> 1 </span>
    </div>
    <div id="bc2">
        <span> ----- </span>
        <span class="dashed-circle"> 2 </span>
    </div>
    <div id="bc3">
        <span> ----- </span>
        <span class="dashed-circle"> 3 </span>
    </div>
    <div id="bc4">
        <span> ----- </span>
        <span class="dashed-circle"> 4 </span>
    </div>
    
</div>

<div id="panels">
    <table>
        <tr>
            <td class='dashed-panel' id="clients"><span class="sit-in-the-corner"> 1 </span> <br /> 
                <table>
                    <tr>
                        <td>John Brown</td>
                    </tr>                                
                    <tr>
                        <td>Jack Dorsey</td>
                    </tr>                
                    <tr>
                        <td>Jane Dempsey</td>
                    </tr>
                </table>                
            </td>
            
            <td class='dashed-panel' id="projects"><span class="sit-in-the-corner"> 2 </span> <br /> 
                <table>
                    <tr>
                        <td>John's Logo</td>
                    </tr>                                
                    <tr>
                        <td>Jack's App UI</td>
                    </tr>                
                    <tr>
                        <td>Jane's Flyer</td>
                    </tr>
                </table>                    
            </td>
        </tr>
        
        <tr>
            <td class='dashed-panel' id="stages"><span class="sit-in-the-corner" id="stage-3"> 3 </span> <br /> 
                <table col='2' id="c1p1"> 
                    <thead>
                        <tr>
                            <td>Stage #</td>
                            <td>Stage Name</td>
              ...

CSS

#blank-dashboard-breadcrumb {
    width: 960px;
    margin: 20px auto;
    text-align: center;
}

#blank-dashboard-breadcrumb #right_arrow {
    float: left;
}

#blank-dashboard-breadcrumb span {
    display: inline;
    font-family: Helvetica, "Helvetica Neue", Arial,  sans-serif;
    font-size: 3em;
    font-weight: bold;
    color: #bdbebf;  
    letter-spacing: 12px;
    float:left;
    margin: auto;
}

#blank-dashboard-breadcrumb .bc-dotted-to-solid {
    color: #000;
}

#blank-dashboard-breadcrumb .dashed-circle {
    border: 5px dotted #bdbebf;
    height:1.3em;
    width: 1.3em;
    border-radius: 75px;
    -moz-border-radius:75px;
    -khtml-border-radius: 75px;
    -webkit-border-radius:75px;    
    display:block;
    float:left;
    letter-spacing: 3px;
}


#panels, #panels table {
    width: 480px;
    margin: 140px auto 0 auto;  
    padding: 0px;
    border-spacing: 20px;
}

.dashed-panel {
    height: 300px;
    width: 50%;
    border: 7px dashed #bdbebf;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -khtml-border-radius: 50px;
    -webkit-border-radius: 50px;
    text-align: center;
    color: #90908f;
    font-family: Baskerville, Cambria, Times New Roman, Times, serif;
}

#stages table, #clients table, #projects table {
    width: 100%;
    margin: 0px auto;
    border-collapse: collapse;
    padding: 5px;    
}

#stages table tr:hover, #clients table tr:hover, #projects table tr:hover {
    color: #000;
}

.dash-elem-selected {
    border: 1px dotted #000;
}

#c2p1, #c3p1 {
    display: none;
}

.sit-in-the-corner {
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    float: left;
    margin-left: 15px;
    margin-top: -70px;
    font-size: 1.5em;
    font-style: bold;
    color: #e0e1e2;
    background: #bdbebf;
    border-radius: 17px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    -khtml-border-radius: 17px;
}

#stage-3 {
    width: 34px;
    height: 34px;
    line-height:...

JavaScript

$(document).ready(function() {
    $('#panels tr table tr').click(function () {
        var $this = $(this),
            tr_class = 'dash-elem-selected';
        if (!$this.parent('thead').length) {
            if ($this.hasClass(tr_class)) {
                $this.removeClass(tr_class);
                tr_class = 'removeClass';
            } else {
                $this.addClass(tr_class).siblings().removeClass(tr_class);
                tr_class = 'addClass';
            }
            $this = $this.parents('td table').siblings('.sit-in-the-corner').text();
            $('#bc' + $.trim($this) + ' span')[tr_class]('bc-dotted-to-solid');
            $('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});
        }
    });
});