JSFiddle - React, Tailwind, and code Playground

by bemulima

HTML

<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

CSS

.items{
  backdrop-filter: blur(15px);
  /** z-index: -1; **/
  background: rgba(1,255,0,0.5);
  transform-style: preserve-3d;
}
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .items {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}
.item{
  width: 100px;
  height: 50px;
  border: 1px solid #ccc;
  position: relative;
  
}
.item:after{
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25px;
  right: -10px;
  background: red;
  /** z-index: -1; **/
  transform: translateZ(-1px);
}