Feature with 3d Cube

<!--
  Day 69: Feature with 3d Cube

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Feature with 3d Cube -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <a
    href="javascript:void(0)"
    class="group relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-3xl bg-white p-7 shadow-lg transition hover:opacity-75"
  >
    <div class="p-10">
      <div
        class="mx-auto size-22 scale-85 rotate-[0.75_1_0.75_45deg] transition-all duration-300 perspective-normal transform-3d *:backface-visible group-hover:scale-100 group-hover:rotate-[0.75_1_0.75_0deg] group-active:scale-95"
      >
        <div
          class="absolute inset-0 flex translate-z-12 rotate-x-0 items-center justify-center bg-indigo-300/75 transition-all duration-300 group-hover:bg-indigo-500/75"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1"
            stroke="currentColor"
            class="hi-outline hi-sparkles inline-block size-12 scale-50 text-white opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100 group-active:scale-125"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
            />
          </svg>
        </div>
        <div
          class="duraion absolute inset-0 -translate-z-12 rotate-y-180 bg-purple-300/75 opacity-75 transition-all group-hover:bg-purple-500/75"
        ></div>
        <div
          class="duraion absolute inset-0 translate-x-12 rotate-y-90 bg-amber-300/75 opacity-75 transition-all group-hover:bg-amber-500/75"
        ></div>
        <div
          class="duraion absolute inset-0 -translate-x-12 -rotate-y-90 bg-pink-300/75 transition-all group-hover:bg-pink-500/75"
        ></div>
        <div
          class="duraion absolute inset-0 -translate-y-12 rotate-x-90 bg-rose-300/75 opacity-75 transition-all group-hover:bg-rose-500/75"
        ></div>
        <div
          class="duraion absolute inset-0 translate-y-12 -rotate-x-90 bg-blue-300/75 transition-all group-hover:bg-blue-500/75"
        ></div>
      </div>
    </div>
    <h3 class="mt-3 text-xl font-bold">AI-Powered Core Engine</h3>
    <p class="mt-1.5 text-sm/relaxed text-slate-600">
      Advanced AI algorithms automatically generate engaging social videos from
      your content, complete with smart scene transitions, auto-captions, and
      trending music recommendations.
    </p>
  </a>
</div>
<!-- END Feature with 3d Cube -->