JSFiddle - React, Tailwind, and code Playground

by Alex Myronov

HTML

<div class="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

.a {
 box-shadow: 0 -1px 5px 1px #6e6e6e;
  border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 50px;
}

body {
  padding: 24px;
}

div:before {
    /* box-shadow: -15px 0 15px -15px inset; */
     box-shadow: -5px 0 5px -5px #6e6e6e inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0px;
    width: 15px;
}
div:after {
    /* box-shadow: 15px 0 15px -15px inset; */
     box-shadow: 5px 0 5px -5px #333 inset;
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
  
}
div {

    background: none repeat scroll 0 0 #EEEEEE;
    height: 100px;
    margin: 0 50px;
    position: relative;
    width: 100px;
}