JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="col-lg-3 col-md-6 col-sm-6 appColumn">
    <div class="box text-center" data-tilt>
    <img class="appImage inner" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="">
    <img class="appImage innerUp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="">
  </div>
  </div>
  
  <div class="col-lg-3 col-md-6 col-sm-6 appColumn">
    <div class="box2 text-center" data-tilt>
    <img class="appImage inner" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="">
    <img class="appImage innerUp multiply" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="">
  </div>
  </div>
</div>

 <script type="text/javascript" src="vanilla-tilt.js"></script>
 <script type="text/javascript">
        VanillaTilt.init(document.querySelector(".box"), {
        max: 25,
        speed: 400
    });
</script>
<script type="text/javascript">
        VanillaTilt.init(document.querySelector(".box2"), {
        max: 25,
        speed: 400
    });
</script>

CSS

body {
  background-color: #dddddd;
}

.appColumn {
  padding: 10px;
}

.box {
    height: 150px;
    width: 100%;
    border-radius: 6px;
    background-color: white;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.box2 {
    height: 150px;
    width: 100%;
    border-radius: 6px;
    background-color: white;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.inner {
    transform: translateZ(30px);
    -webkit-transform: translateZ(30px);
    background-color:rgba(255, 255, 255, 0);
    z-index: 0;
}

.innerUp {
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
    background-color:rgba(255, 255, 255, 0);
    z-index: 1;
}

.multiply {
  mix-blend-mode: multiply;
}

.appImage {
    max-width: 100%;
    padding: 5px;
	  padding-bottom: 5px;
	  padding-top: 5px;
    max-height: 150px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}