JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bookmarks-list clearfix">
    
    <div class="item js-bookmarks">
        
        <div class="bg-rotate">
            Some content<br/>
        <b>Some data here...</b>
        </div>
    </div>
    
    <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
    <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
    <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
        <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
    <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
    <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
    <div class="item js-bookmarks">
        Some content<br/>
        <b>Some data here...</b>
        <div class="bg-rotate"></div>
    </div>
    
    
</div>

SCSS

body {
    background: #000;
}

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }














.bookmarks-list {
    width: 1200px;
    .item {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        display: block;
        float: left;
        width: 400px;
        height: 300px;
        overflow: hidden;
        -webkit-perspective: 1000px;
        -webkit-transform-style: preserve-3d;
        
        padding-top: 95px;
        text-align: center;
        font-size: 40px;
        cursor: pointer;
        
            -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
        
        .bg-rotate {
            display:block;
            position:absolute;
            z-index: -1;
            top: -20px; left: -20px;
            width: 440px; height: 340px;
            background: url("http://www.bittbox.com/caleb/free_high_res_texture_52.jpg") no-repeat 50% 50%;
            -webkit-transition: -webkit-transform .2s;
            
            box-shadow: inset 0px 0px 5px 15px #000;
        }
        .b-shadow {
        //    box-shadow: inset 0px 0px 5px 15px #000;
        }
    }
}

JavaScript

var $bookmarks = $('.js-bookmarks');
if ($bookmarks.length) {
    $bookmarks.mousemove(function(e){
        var delta = 20;
        var $this = $(this);
        var $bg = $this.find('.bg-rotate');
        var offset = $this.offset();
        var bgW = $bg.width() / 2;
        var bgH = $bg.height() / 2;
        var mx = ((e.pageX - offset.left) - bgW) / delta;
        var my = ((e.pageY - offset.top) - bgH) / -delta;
        //console.log([mx,my,offset.left]);
        $bg.css({'-webkit-transform':'rotateX('+my+'deg) rotateY('+mx+'deg)'});
        
    }).mouseleave(function(){
        var $this = $(this);
        var $bg = $this.find('.bg-rotate');
        $bg.removeClass('b-shadow');
        setTimeout(function(){
                $bg.css({'-webkit-transition':'-webkit-transform .5s',
                         '-webkit-transform':'rotateX(0deg) rotateY(0deg)'
                });
        }, 100);
    }).mouseenter(function(){
        var $this = $(this);
        var $bg = $this.find('.bg-rotate');
        $bg.addClass('b-shadow');
        setTimeout(function(){
                $bg.css({
                    '-webkit-transition':'none'
                });
        }, 200);
    });
}