JSFiddle - React, Tailwind, and code Playground

by anatomic

HTML

<ul class="container">
        <li class="item">item 1</li>
        <li class="item">item 2</li>
        <li class="item">item 3</li>
        <li class="item">item 4</li>
        <li class="item">item 5</li>
        <li class="item">item 6</li>
        <li class="item">item 7</li>
        <li class="item">item 8</li>
        <li class="item">item 9</li>
    </ul>

SCSS

.container{
    margin:10px;
    background:#fefefe;
    overflow:auto;
    background:#dedede;   
    font-family:Helvetica, Arial, sans-serif;
      
    .item{
        -webkit-filter: blur(2px);
        float:left;
        width:33.333333333%;  
        background:#dedede;   
        box-sizing:border-box;
        padding:50px 0;
        text-align:center;        
        color:white;     
        cursor:pointer;           
-webkit-transition: all 0.4s;            
        
        &:hover{
            background:#f3f3f3;
            -webkit-filter: blur(0);
            -webkit-filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
            color:#000;
        }        
    }                            

}