JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>Some Value</td>
</tr>
<tr>
<td>Some Value</td>
</tr>
<tr>
<td>Some Value</td>
</tr>
</tbody>
</table>
</div>
CSS
table {
border-spacing: 0px;
border-bottom: 1px solid black;
}
table td {
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
.container {
background-color: #fafafa;
}
table tr {
position: relative;
}
table td {
position:relative;
background-color: #EFEFEF;
z-index: -1;
}
table tr:hover {
position: relative;
box-shadow:
inset 5px 0 0 #dadce0,
inset -3px 0 0 #dadce0,
0 5px 2px 0 rgba(60,64,67,.3),
0 5px 3px 1px rgba(60,64,67,.15);
}