JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="foto">
                    <img src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
                    <img src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&w=1000&q=80">
                    <img id="pad"src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
                    <p>
Lalji sad;lksa;dk ;lkdk ;lskd 
</p>
</div>

CSS

#foto img {
            width: 300px;
            height:500px;
            position: relative;
            box-shadow: 1px 3px 3px 1px rgba(63, 63, 63, 0.322);

        }
        #pad {
            position: absolute;
            z-index: 50000000000;
            /*transform: scale(1.8) translate(30%,30%);;*/
            bottom:50%;
        }
        
        #foto > *:not(#pad)
        {
            filter: blur(3px);
        }