JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Divs</h1>

<div>
    <div class="row">
        <div class="bar">
            <div class="bars"></div>
        </div>
    </div>
</div>

<h1>Table</h1>

<table>
    <tr class="row">
        <td>
            <div class="bar">
                <div class="bars"></div>
            </div>    
        </td>
    </tr>
</table>

SCSS

table {
    width: 100%;
}

.row {
    width: 100%;
    height: 49px;
    background: #fff;
    // The following filters will break overflow hidden of .bar
    //-webkit-filter: drop-shadow(0 0 7px #aaa);
    //-webkit-filter: blur(0px);
    //box-shadow: 0 0 7px 0 #aaa;
}

.bar {
    position: relative;
    width: 11px;
    height: 8px;
    filter: blur(0px);
    overflow: hidden;

    .bars {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 2px;
        height: 10px;
            
        background: #39b54a;
        box-shadow: #39b54a -3px 2px 0, #39b54a -6px 4px 0, #39b54a -9px 6px 0;
    }
}