<!-- Body Styles  -->
<div class="min-h-screen min-w-screen flex items-center justify-center bg-gradient-to-r from-violet-500 to-violet-700">

  <!--  Card Styles  -->
  <div class="cursor-pointer [transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)] w-96 sm:w-84 p-5 bg-violet-300 rounded-lg shadow-lg group duration-300">

    <!-- Image Styles  -->
    <div class="bg-center bg-cover bg-img-bg p-5 rounded-lg">
      <img width="300px" class="duration-300 group-hover:-translate-x-8" src="https://i.ibb.co.com/NZFBRCY/funny-3d-illustration-cartoon-teenage-girl-removebg-preview.png" alt="girl image" border="0">
    </div>

    <!-- Text Styles -->
    <div class="text-center mt-4 text-gray-900">
      <p class="font-bold text-xl">Some Card Content</p>
      <p>Some more content to fill up the space</p>
    </div>
  </div>
</div>

body {
  font-family: "Poppins", serif;
}

// Inspired By: https://codepen.io/t_afif/pen/KKOXrer