JSFiddle - React, Tailwind, and code Playground

HTML

<!-- The behavior of the 3D css transform is different between Firefox and Chromium -->
<div id="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

CSS

.card {
  color: #ddd;
  width: 150px;
  height: 250px;
  border-radius: 10px;
  background-color: #222;
  padding: 5px;
  text-align: center;
  margin-right: 3px;
  margin-bottom: 3px;
  float: left;
  cursor: pointer;
}

.card:hover {
  position: relative;
  box-shadow: -5px 11px 13px rgba(0,0,0, 0.7);
  transform: perspective(999px) translateZ(200px) rotateY(10deg);
  -webkit-transform: perspective(999px) translateZ(200px) rotateY(10deg);
  transition: transform .1s;
  -webkit-transition: -webkit-transform .1s;
}