Muted Small Paragraph Text (Tailwind)

<article class="relative overflow-hidden min-h-[15rem] md:min-h-[16rem] scroll-fade scroll-fade-delay hover:bg-white/[0.08] hover:ring-white/20 transition-all group bg-white/5 ring-white/10 ring-1 rounded-2xl pt-0 pr-0 pb-4 pl-0">
  <!-- Back layer 3 (widest) -->
  <div class="absolute inset-x-[-12px] top-[-8px] bottom-[-8px] bg-white/[0.02] ring-1 ring-white/5 rounded-2xl pointer-events-none opacity-60"></div>
  
  <!-- Back layer 2 (medium) -->
  <div class="absolute inset-x-[-6px] top-[-4px] bottom-[-4px] bg-white/[0.03] ring-1 ring-white/8 rounded-2xl pointer-events-none opacity-80"></div>
  
  <!-- Front panel content -->
  <div class="relative z-10">
    <div class="pt-6 pr-6 pb-6 pl-6">
      <h4 class="text-base font-semibold tracking-tight" style="">Business Intelligence Discovery</h4>
      <p class="text-sm text-slate-400 mt-1" style="">Uncover hidden patterns and actionable insights across all your data sources with AI-powered analytics.</p>
    </div>
    <div class="relative overflow-visible pr-6 pl-6">
      <!-- Back layer 3 (furthest, smallest) -->
      <div class="pointer-events-none absolute inset-x-8 top-[-12px] bottom-2 bg-gradient-to-b from-white/5 to-transparent/20 opacity-0 mix-blend-normal ring-neutral-50/5 ring-1 rounded-xl blur-none scale-95 invisible"></div>
      
      <!-- Back layer 2 (middle depth) -->
      <div class="pointer-events-none absolute inset-x-6 top-[-6px] bottom-1 blur-[1px] opacity-0 mix-blend-normal ring-1 rounded-xl mt-4 mb-4 scale-[0.97] invisible"></div>
      
      <!-- Back layer 1 (closest background) -->
      <div class="pointer-events-none absolute inset-x-3 top-0 bottom-0 ring-white/10 ring-1 bg-gradient-to-b from-[#ffffff]/20 to-black/0 rounded-2xl mt-3 mb-3"></div>

      <!-- Main search card (top layer) -->
      


  
  
  <script src="https://cdn.tailwindcss.com"></script>


  <section class="relative max-w-3xl mr-auto ml-auto pt-2 pr-0 pb-0 pl-0">

    <!-- Stack: background layers -->
    

    <!-- Top card -->
    <div class="shadow-[0_24px_90px_-20px_rgba(0,0,0,0.7)] bg-white/10 border-white/20 border-2 rounded-2xl mt-6 mb-6 backdrop-blur-xl">
  <div class="sm:p-6 pt-6 pr-6 pb-6 pl-6 shadow-sm backdrop-blur-none">
    <!-- search -->
    <label class="block">
      <div class="flex items-center gap-3 rounded-xl border border-white/20 bg-white/10 px-4 py-3">
        <!-- magnifier -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="7" class=""></circle>
          <path d="M21 21l-4.3-4.3" class=""></path>
        </svg>
        <input type="text" placeholder="Discover growth opportunities..." class="w-full bg-transparent placeholder:text-white/60 focus:outline-none text-white">
      </div>
    </label>

    <!-- list -->
    <div class="mt-4 space-y-3">
      <button class="group flex w-full items-center justify-between rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-left hover:bg-white/20 transition">
        <span class="flex items-center gap-3">
          <!-- trend icon -->
          <svg xmlns="http://www.w3.org/2000/svg" class="w-[20px] h-[20px] text-neutral-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px;">
            <path d="M3 17l6-6 4 4 8-8" class=""></path>
          </svg>
          <span class="text-white" style="">Revenue optimization insights</span>
        </span>
        <span class="text-sm text-white/70" style="">Analytics</span>
      </button>

      <button class="group flex w-full items-center justify-between rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-left hover:bg-white/20 transition">
        <span class="flex items-center gap-3">
          <!-- user icon -->
          <svg xmlns="http://www.w3.org/2000/svg" class="w-[20px] h-[20px] text-neutral-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 20px;">
            <circle cx="12" cy="7" r="4" class=""></circle>
            <path d="M5.5 21a7.5 7.5 0 0 1 13 0" class=""></path>
          </svg>
          <span class="text-white" style="">Customer behavior analysis</span>
        </span>
        <span class="text-sm text-white/70" style="">Reports</span>
      </button>
    </div>
  </div>
</div></section>

  <!-- Optional: subtle hover parallax -->
  <script>
    const section = document.querySelector('section');
    const backs = section.querySelectorAll('.absolute.inset-0');
    section.addEventListener('mousemove', (e) => {
      const r = section.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      backs[0].style.transform = `scale(0.95) translate(${x * -8}px, ${y * -8 - 24}px)`;
      backs[1].style.transform = `scale(0.98) translate(${x * -5}px, ${y * -5 - 12}px)`;
    });
    section.addEventListener('mouseleave', () => {
      backs[0].style.transform = 'scale(0.95) translate(0px, -24px)';
      backs[1].style.transform = 'scale(0.98) translate(0px, -12px)';
    });
  </script>



  </div>
</div></article>