Stock Performance Trading Card

<div class="flex flex-col p-8 max-w-sm h-[600px] hover:scale-105 transition-all duration-300 hover:shadow-3xl group text-white bg-zinc-900 bg-cover rounded-3xl shadow-2xl justify-between opacity-0 translate-y-[40px] blur-lg animate-[fadeInSlideBlur_0.8s_ease-out_forwards]" style="background-image: url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1186f423-e9dd-4944-903e-b47acd318366_1600w.jpg); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px;">
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7 text-emerald-400 group-hover:scale-110 transition-transform">
        <path d="M16 7h6v6"></path>
        <path d="m22 7-8.5 8.5-5-5L2 17"></path>
      </svg>
      <span class="text-xs px-3 py-1.5 bg-emerald-500/20 text-emerald-400 rounded-full font-geist">Live</span>
    </div>
    <div>
      <p class="text-4xl sm:text-5xl tracking-tight font-geist font-semibold">NVDA +8.24%</p>
      <p class="text-zinc-400 text-base mt-2 font-geist">NVIDIA Corporation</p>
    </div>
    <div class="relative">
      <div class="absolute top-0 right-0 text-right">
        <p class="text-emerald-400 font-semibold text-lg font-geist">$892.13</p>
        <p class="text-zinc-500 text-sm font-geist">+$67.82</p>
      </div>
    </div>
  </div>
  <div class="space-y-4 border-t border-zinc-800 pt-6">
    <p class="text-zinc-400 text-sm leading-relaxed font-geist">
      AI chip demand drives exceptional growth. Strong quarterly earnings exceeded analyst expectations by 15%.
    </p>
    <div class="flex justify-between items-center">
      <div class="flex items-center gap-2">
        <span class="font-semibold text-sm tracking-tight font-geist">VERTEX</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-emerald-400">
          <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
      </div>
      <a href="#" class="text-emerald-400 text-sm hover:underline transition-colors font-geist">vertex.trade</a>
    </div>
  </div>
  <style>@keyframes fadeInSlideBlur { to { opacity: 1; transform: translateY(0); filter: blur(0px); } }</style>
</div>