JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="outer">
    <h2>Inset Box with scroller</h2>
    
    <table cellpadding="0" cellspacing="0" width="0">
    <tr>
       <td>
    
    <div class="shadow-top"></div>
    <div class="inner-content">
        <table>
            <tr>
                <td>foo</td>
                <td class="red">bar</td>
                <td>foo</td>
            </tr>
            <tr>
                <td class="red">bar</td>
                <td>foo</td>
                <td class="red">bar</td>
            </tr>
            <tr>
                <td>foo</td>
                <td class="red">bar</td>
                <td>foo</td>
            </tr>
        </table>
    </div><!-- inner-content ends -->
    <div class="shadow-bottom"></div>

        </td></tr></table>
</div>

CSS

.outer {
    width:500px;
    padding:10px;
    background:#ccc;}

h2 {text-align:center}

.shadow-top {
    position: relative;
    z-index: 2;

    box-shadow: 0px 10px 10px -10px #000 inset;

    height: 20px;
    margin-bottom: -20px;
    margin-right: 15px;
}

.shadow-bottom {
    position: relative;
    z-index: 2;

    box-shadow: 0px -10px 10px -10px red inset;

    height: 20px;
    margin-top: -35px;
    margin-right: 15px;
}

/* inner content styles */
.inner-content {
    width:400px;
    height:300px;
    overflow:auto;
    margin:0 auto;
    padding: 0;
    background:#fff;
    }
.inner-content td {
    line-height: 11em;
    min-width: 11em;
    text-align: center;
}
.red {
    background: #f00;
}