JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<!-- disclosure panel -->
<div class=wrapper>
    <div class="overlay-left"></div>    

<div class="content"> <!-- horizontal panel -->
    <table class="ot-session">
        <tr><td>img</td></tr>
        <tr><td>label</td></tr>
    </table>
     <table class="ot-session">
        <tr><td>img</td></tr>
        <tr><td>label</td></tr>
    </table>
    <table class="ot-session">
        <tr><td>img</td></tr>
        <tr><td>label</td></tr>
    </table>
</div>    
</div>

CSS

body { 
    background-color: rgb(230, 236, 240);
}

.wrapper {
    height:134px;
    width:100%;
}

.content {
background:white;    
border: medium hidden;
padding: 14px 0px;
margin: 0px;  
position:absolute;    
height:134px;    
}

.content table { height:130px;  }

.ot-session {
    width: 134px;
    border: #444 1px solid;
    margin:1em;
    float: left;
    padding: 0px 36px 0px 0px;
    background:#eef;
}

.overlay-left {
 float:left;
 position:relative; 
    left:0;
    top:0;
 background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    z-index:100;
 width:45px;
 height:130px;   
}