JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
<div class="test-wrap">
<div class="test"></div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
CSS
body,
.test,
.test-wrap
{
box-sizing:border-box;
padding:0;
margin:0;
}
.test-wrap{
position:fixed;
top:0;
left:0;
height: 100%;
width: 100%;
overflow:hidden;
z-index:-1;
}
.test {
position:relative;
top:-5%;
left:-5%;
height: 110%;
width: 110%;
background: url(https://i.ytimg.com/vi/oZa_djYJr4E/maxresdefault.jpg);
background-size: cover;
background-position: center;
}
.content{
color:white;
margin:20px;
padding:15px;
background-color:rgba(0,0,0,0.5);
}
JavaScript
$('.test').tilt({
maxTilt: 3,
perspective: 500,
});