JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span class="shadow">
    A
  </span>
</div>
<div>
  <span class="shadow">
    a
  </span>
  <span class="shadow">
    b
  </span>
</div>
<div>
  <span class="shadow">
    A B
  </span>
</div>
<div>
  <span class="shadow">
    A B C
  </span>
</div>

CSS

/* shadow color: #2d5986 */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-flow: column wrap;
  overflow: hidden;
}
div {
  min-height: 128px;
  min-width: 128px;
  background-color: #369;
  color: white;
  font-size: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
span {
  /* background-color: #47a; */
  position: relative;
  text-align: center;
  text-shadow: #2d5986 1px 1px,
    #2d5986 2px 2px,
    #2d5986 3px 3px,
    #2d5986 4px 4px,
    #2d5986 5px 5px,
    #2d5986 6px 6px,
    #2d5986 7px 7px,
    #2d5986 8px 8px,
    #2d5986 9px 9px,
    #2d5986 10px 10px,
    #2d5986 11px 11px,
    #2d5986 12px 12px,
    #2d5986 13px 13px,
    #2d5986 14px 14px;
}
.shadow:before, .shadow:after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 15px;
  z-index: 1;
  transform-origin: bottom right;
}
.shadow:before {
  height: 40px; /* increased height */
  width: 100%;
  left: 0px;
  transform: skewX(45deg);
  box-shadow: 1px 40px 0px 0px #2d5986;  /* 1px in x direction to avoid small gap between shadows */
}
/* .shadow:after {
  width: 10px;  increased width
  height: 100%;
  top: 25px;
  transform: skewY(45deg);
  box-shadow: 10px 0px #2d5986;
} */