Interactive Feature Highlight Card (Tailwind)

<section class="relative z-10  animate-[fadeInUp_1s_ease-out_1.4s_forwards]" style="transform: translateY(50px);">
      <div class="max-w-7xl mr-auto ml-auto pr-6 pb-20 pl-6">
        <div class="relative overflow-hidden md:p-12 ring-1 ring-zinc-800 rounded-3xl pt-8 pr-8 pb-8 pl-8 hover:ring-emerald-400/20 hover:scale-[1.02] transition-all duration-500 cursor-pointer group">
          <div class="pointer-events-none absolute inset-0 rounded-3xl bg-[radial-gradient(circle_at_30%_20%,rgba(16,185,129,0.08),transparent_35%),radial-gradient(circle_at_70%_80%,rgba(6,182,212,0.08),transparent_35%)] group-hover:opacity-150 transition-opacity"></div>
          <div class="absolute inset-0 opacity-[0.20]">
            <img alt="" src="https://cdn.midjourney.com/235154ac-6c61-4975-8203-3d840d93cf8c/0_0.png?w=800&amp;q=80" class="h-full w-full group-hover:opacity-30 transition-opacity duration-500 object-cover" style="">
          </div>

          <div class="relative mx-auto max-w-3xl text-center">
            <div class="mx-auto mb-6 grid h-16 w-16 place-items-center rounded-full bg-emerald-400/10 ring-1 ring-emerald-400/30 group-hover:bg-emerald-400/20 group-hover:ring-emerald-400/50 group-hover:scale-110 transition-all duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye h-7 w-7 text-emerald-300 group-hover:scale-110 transition-transform"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
            </div>
            <h3 class="text-4xl tracking-tight text-white sm:text-5xl font-sans font-semibold group-hover:text-emerald-200 transition-colors duration-500" style="">Universal Color Standards</h3>
            <p class="mx-auto mt-4 max-w-2xl text-neutral-300 group-hover:text-neutral-200 transition-colors font-sans" style="">Instantly capture and convert colors to industry-standard formats including Pantone®, RAL, LAB, RGB, HSB, and HEX. The ChromaMax Pro ensures consistent color communication across all your workflows and teams.</p>
            <div class="mt-7">
              <a href="#" class="relative inline-flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium text-white hover:scale-105 transition-all duration-200 group/btn">
                <span class="absolute inset-0 rounded-xl bg-gradient-to-r from-emerald-500/20 to-cyan-500/20"></span>
                <span class="absolute inset-0 rounded-xl ring-1 ring-emerald-400/40 group-hover/btn:ring-emerald-400/60 transition-all"></span>
                <span class="relative font-sans" style="">Discover Features</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right relative h-4 w-4 group-hover/btn:translate-x-1 transition-transform"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>