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> <hr /> </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 class="changer">
                        <td>John Brown</td>
                    </tr>                                
                    <tr class="changer">
                        <td>Jack Dorsey</td>
                    </tr>                
                    <tr class="changer">
                        <td>Jane Dempsey</td>
                    </tr>
                    <tr class="changer">
                        <td>Janet Demphrey</td>
                    </tr>
                </table>                
            </td>
            
            <td class='dashed-panel' id="projects"><span class="sit-in-the-corner"> 2 </span> <br /> 
                <table>
                    <tr class="changer">
                        <td>John's Logo</td>
                    </tr>                                
                    <tr class="changer">
                        <td>Jack's App UI</td>
                    </tr>                
                    <tr class="changer">
                        <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...

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;
    font-size: 1.5em;
}

#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;
}

.dashed-panel:hover span,...

JavaScript

$('tr.changer').click(function () {
    var $tr = $(this),
        tr_class = 'dash-elem-selected',
        id = $.trim($tr.closest('table').siblings('span.sit-in-the-corner').text());;

    if ( $tr.hasClass( tr_class ) ) {
        $tr.removeClass( tr_class );
        $('#bc' + id + ' span').removeClass('bc-dotted-to-solid')
            .filter('span.dashed-circle').removeClass('selected');
    } else {
        $tr.addClass( tr_class ).siblings().removeClass( tr_class );
        $('#bc' + id + ' span').addClass('bc-dotted-to-solid')
            .filter('span.dashed-circle').addClass('selected');
    }
});