JSFiddle - React, Tailwind, and code Playground

by Deepak Manwal

HTML

<div class="blur">
    <span class="inner">&nbsp;</span>
    <span class="inner">&nbsp;</span>
    <span class="inner">&nbsp;</span>
    <span class="inner">&nbsp;</span>
    <span class="inner">&nbsp;</span>
</div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>

CSS

.blur {
  filter:url(#wherearemyglasses);
  /* ^ for Firefox */
  -webkit-filter: blur(6px);  
  /* ^ Webkit browsers */
  filter: blur(6px);  
}
.inner{
    width:30px;
    display:inline-block;
    background:#696969;
}