JSFiddle - React, Tailwind, and code Playground

by Daniel Mikołajczak

HTML

<div class="animaiton">
    
</div>
<div class="wrapper">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur ante eget justo consectetur convallis. Donec sollicitudin euismod mauris vitae pulvinar.</div>
</div>

CSS

html {
    height: 100%;
}
body {
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/0SP70JWWOK.jpg');
    background-size: cover;
    background-position:center center;
    height:100%;
    line-height:1.25em;
    font-family: -apple-system;
}
.wrapper {
    position: absolute;
    top:50%;
    left:50%;
    width: 400px;
    margin-left:-200px;
    margin-top:-200px;
    height:400px;
    -webkit-border-radius: 40px;
    overflow:hidden;
    -webkit-transform: translateZ(0px);

}

.animaiton {
    position:absolute;
    top:40%;
    left:50%;
    background:red;
    width:100px; margin-left:-50px; height:100px;
    -webkit-animation: mymove 3s infinite ease alternate-reverse; 
    animation: mymove 3s infinite ease alternate-reverse;  
}

.wrapper:before{
    position: absolute;
    -webkit-backdrop-filter: blur(12px);
    content: '';
    display:block;
    top:0; 
    left:0;
    right:0;
    bottom:0%;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {left: 50%;}
    100% {left: 35%;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {left: 50%;}
    100% {left: 35%;}
}


.wrapper > div {
    background: rgba(0, 0, 0, 0.6);
    padding: 2em;
    position:absolute;
    height:25%;
    left: 0;
    right: 0;
    bottom:0;
    color:#fff;
    z-index:2;
}