JSFiddle - React, Tailwind, and code Playground

by WORKMAN

HTML

<div class="top-b"> Снизу</div>
<div class="left-b">Справа</div>
<div class="right-b">Слева</div>
<div class="bottom-b">Вверху</div>

CSS

.top-b,
.left-b,
.right-b,
.bottom-b {
  display: block;
  width: 250px;
  height: 100px;
  background: #ddd;
  margin: 15px 0;
  padding: 15px;
  text-align: center;
}


/*Сверху*/

.top-b {
  box-shadow: 0 7px 9px -7px rgba(0, 0, 0, 0.7);
}


/*Слева*/

.left-b {
  box-shadow: 7px 0 9px -7px rgba(0, 0, 0, 0.7);
}


/*Справа*/

.right-b {
  box-shadow: -7px 0 9px -7px rgba(0, 0, 0, 0.7);
}


/*В низу*/

.bottom-b {
  box-shadow: 0 -7px 9px -7px rgba(0, 0, 0, 0.7);
}