JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="wrapper">
  <div class="boxone">
    <span>
      hi
    </span>
    <span class='l'>
      just another span

    </span>

  </div>
  <div class="boxone">
    HI

  </div>
  <div class="boxone">
    HI

  </div>



</div>

CSS

.wrapper {
  height: 200px;
  background-image: url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");

}

.boxone {
  height: 30px;
  margin-top: 2px;
  backdrop-filter: blur(30px);



}

.l {
  top: 2px;
  left: 40px;
  height: 100px;
  background: green;
  position: absolute;
}