JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="1" cellpadding"0" border="0">
    <tr>
        <td>test1</td>
        <td class="testTD">test1</td>
        <td>test1</td>
    </tr>
    <tr>
        <td>test2<br/>
            test2
        </td>
        <td class="testTD">test2</td>
        <td>test2</td>
    </tr>
    <tr>
        <td>test3<br/>
            test3<br/>
            test3
        </td>
        <td class="testTD">test3</td>
        <td>test3</td>
    </tr>
</table>

CSS

body {padding:15px;}
table {background:grey;width:100%;}
table td{text-align:center;vertical-align:top;background:white;padding:4px;width:33.33%;position:relative;}

.testTD:before {
	box-shadow: -15px 0 15px -15px grey inset;
	content: " ";
	height: 100%;
	left: -15px;
	position: absolute;
	top: 0;
	width: 15px;
    background:Red;
}
.testTD:after{
    z-index:1;
	box-shadow: 15px 0 15px -15px grey inset;
	content: " ";
	height: 100%;
	right: -15px;
	position: absolute;
	top: 0;
	width: 15px;
    background:Red;
}