JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Tables
================================================== -->
<div class="table">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="bs-component"><!--Start the table-->
<table class="table table-striped" data-scrollreveal="enter left, wait 1.5s">
<thead>
<tr>
<th><h1>Start Ribbon Here!<h1></th>
<th>Mine Picture Here</th>
<th>Mine Picture Here</th>
<th>Mine Picture Here</th>
<th>Mine Picture Here</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>Membership Plan</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>Membership Plan</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>Membership Plan</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>Membership Plan</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
...
CSS
.table{position:relative;}
.table:before{
content:"";
position:absolute;
top:15px;
left:50px;
width:120px;
height:-webkit-calc(100% - 50px);
height:calc(100% - 50px);
background:tomato;
border-top: 5px dashed blue;
border-left: 5px dashed blue;
border-right: 5px dashed blue;
box-shadow: 0 0 0 15px tomato;
border-radius:10px;
}
.table:after{
content:"";
position:absolute;
bottom:-15px;
left:20px;
height:75px;
width:75px;
border-radius:10px;
background:tomato;
border-bottom: 5px dashed blue;
border-right: 5px dashed blue;
box-shadow: 0 0 0 15px tomato;
transform:rotate(45deg);
}