JSFiddle - React, Tailwind, and code Playground

by Ukjin Yang

HTML

<div id='test'>
    <div id='sub'>shadow comes me.</div>
</div>

CSS

#test{position:relative;padding-bottom:0;}
#test:after{content:""; display:block; position:absolute; left:0; bottom:3px; width:100%; border-top:1px solid #888; border-bottom:1px solid #aaa; background:#999; height:1px;}
#test:before{content:""; display:block; position:absolute; left:0; bottom:0; width:100%; border-top:1px solid #bbb; border-bottom:1px solid #eee; background:#ccc; height:1px;}
#sub{position:relative;padding-right:1em;width:240px;padding-bottom:1em;}
#sub:after{content:""; display:block; position:absolute;top:0;bottom:6px; right:3px; width:1px; border-left:1px solid #888; border-right:1px solid #aaa; background:#999;}
#sub:before{content:""; display:block; position:absolute;top:0;bottom:6px; right:0;width:1px; border-left:1px solid #bbb; border-right:1px solid #eee; background:#ccc;}