Gradient Yield Comparison Card with Action Icons

<div class="relative max-w-3xl sm:px-6 lg:px-8 mr-auto ml-auto pt-24 pr-4 pb-24 pl-4">
        <!-- Layered cards -->
        <div class="relative">
          <div class="absolute -inset-6 -z-10 rounded-3xl bg-white/5 shadow-[0_20px_80px_-20px_rgba(0,0,0,0.6)] ring-1 ring-white/10 backdrop-blur-md scale-[0.98] translate-y-3"></div>
          <div class="ring-1 ring-white/10 shadow-[0_20px_100px_-30px_rgba(0,0,0,0.7)] bg-white/5 rounded-3xl backdrop-blur-xl">
            <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
              <!-- Bars -->
              <div class="grid grid-cols-12 gap-x-4 gap-y-6">
                <!-- Labels -->
                <div class="col-span-5 sm:col-span-4 space-y-6">
                  <p class="text-slate-200 text-sm font-medium leading-6">Luma Bank Yield</p>
                  <p class="text-slate-300/80 text-sm font-normal leading-6">Market average</p>
                </div>

                <!-- Bars Column -->
                <div class="relative col-span-5 sm:col-span-6 space-y-6">
                  <!-- vertical guide -->
                  <div class="pointer-events-none absolute left-0 top-1 bottom-1 w-px bg-white/20"></div>

                  <!-- Bar 1 -->
                  <div class="pl-2">
                    <div class="h-8 w-full rounded-full bg-white/10">
                      <div class="h-8 rounded-full bg-gradient-to-r from-sky-500 via-blue-500 to-indigo-500 w-[78%] shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"></div>
                    </div>
                  </div>

                  <!-- Bar 2 -->
                  <div class="pl-2">
                    <div class="h-8 w-full rounded-full bg-white/10">
                      <div class="h-8 rounded-full bg-slate-400/60 w-[18%] shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]"></div>
                    </div>
                  </div>
                </div>

                <!-- Values -->
                <div class="col-span-2 sm:col-span-2 space-y-6 text-right">
                  <div class="flex flex-col items-end">
                    <span class="text-white text-base font-semibold leading-tight">4.8%</span>
                    <span class="text-slate-300/70 text-[10px] font-medium tracking-wide">APY</span>
                  </div>
                  <div class="flex flex-col items-end">
                    <span class="text-slate-200 text-base font-medium leading-tight">0.6%</span>
                    <span class="text-slate-300/70 text-[10px] font-medium tracking-wide">APY</span>
                  </div>
                </div>
              </div>

              <!-- Title -->
              <div class="mt-8">
                <h2 class="text-white text-3xl tracking-tight font-semibold">Seamless Integrations</h2>
                <p class="mt-2 text-slate-300/80 text-sm font-normal leading-6">Connect accounts, automate payouts, and monitor growth with one unified dashboard.</p>
              </div>

              <!-- Icon actions -->
              <div class="mt-6 flex items-center gap-4 sm:gap-6">
                <!-- Button -->
                <button class="group relative inline-flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_8px_30px_-12px_rgba(0,0,0,0.6)] backdrop-blur hover:bg-white/[0.09] transition">
                  <span class="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent"></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="zap" class="lucide lucide-zap h-5 w-5 text-sky-300"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                </button>
                <button class="group relative inline-flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_8px_30px_-12px_rgba(0,0,0,0.6)] backdrop-blur hover:bg-white/[0.09] transition">
                  <span class="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent"></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="search" class="lucide lucide-search h-5 w-5 text-indigo-300"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
                </button>
                <button class="group relative inline-flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_8px_30px_-12px_rgba(0,0,0,0.6)] backdrop-blur hover:bg-white/[0.09] transition">
                  <span class="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent"></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="user" class="lucide lucide-user h-5 w-5 text-fuchsia-300"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                </button>
                <button class="group relative inline-flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_8px_30px_-12px_rgba(0,0,0,0.6)] backdrop-blur hover:bg-white/[0.09] transition">
                  <span class="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent"></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="cloud" class="lucide lucide-cloud h-5 w-5 text-teal-300"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path></svg>
                </button>
              </div>

              <!-- Fine print -->
              <div class="mt-6">
                <p class="text-[11px] text-slate-400/80 leading-5">Rates shown are illustrative. Actual APY may vary based on balance and term.</p>
              </div>
            </div>
          </div>
        </div>
      </div>