JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="box shadow shadow--left"></div>
<div class="box shadow shadow--right"></div>

CSS

.box {
  margin: 20px;
  border: 1px solid #ccc;
  height: 100px;
  width: 100px;
  position: relative;
}

.shadow::before, .shadow::after {
  display:    block;
  content:    '';
  position:   absolute;
  width:      5px;
  height:     100%;
  top:        0px;
}

.shadow--left::before {
  left:       -5px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.shadow--right::after {
  right:      -5px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}