JSFiddle - React, Tailwind, and code Playground
HTML
<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"> <!-- Client1, Project 1 -->
<thead>
<tr>
<td>Stage #</td>
<td>Stage Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John's Wireframes </td>
</tr>
<tr>
<td>2</td>
<td>John's Monochrome </td>
</tr>
<tr>
<td>3 </td>
<td>John's Color </td>
...
CSS
#panels, #panels table {
width: 480px;
margin: 140px auto 0 auto; /* top, right, bottom, left */
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: 34px;
text-align: center;
float: left;
margin-left: 15px;
margin-top: -50px;
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-4 {
width: 34px;
height: 34px;
float: left;
margin-left: 15px;
margin-top: -25px;
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, .dashed-panel:hover #stage-3, .dashed-panel:hover #stage-4 {
background: #484844;
color:...
JavaScript
$(document).ready(function() {
$('#clients table tr, #stages table tr, #projects table tr').click(function() {
$(this).toggleClass('dash-elem-selected');
});
});