3D Flip Card

<!-- Flips on hover and on keyboard focus of the tabbable front face. -->
<style>
  .flip { perspective: 1000px; }
  .flip-inner { transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
  .flip:hover .flip-inner, .flip:focus-within .flip-inner { transform: rotateY(180deg); }
  .flip-face { backface-visibility: hidden; }
  .flip-back { transform: rotateY(180deg); }
  @media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
</style>

<div class="flip h-48 w-full max-w-xs">
  <div class="flip-inner relative h-full w-full">
    <div class="flip-face absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-2xl border border-gray-200 bg-white p-6 text-center dark:border-gray-800 dark:bg-gray-900" tabindex="0">
      <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">Pro plan</span>
      <span class="text-sm text-gray-500 dark:text-gray-400">Hover to reveal</span>
    </div>
    <div class="flip-face flip-back absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-2xl border border-blue-500 bg-blue-600 p-6 text-center text-white">
      <span class="text-3xl font-bold">$29/mo</span>
      <span class="text-sm text-blue-100">Everything you need to scale</span>
    </div>
  </div>
</div>