Interactive Feature Card Stack

<div class="cards-section feature-1-active w-full max-w-md mx-auto" style="--_offset-steps: 5rem; --_scale-steps: 12; --_opacity-steps: 18; display: grid; grid-template-areas: 'stack'; perspective: 1000px; height: 36rem;">
  <style>
    .cards-section.feature-1-active { --_1-order: 4; --_1-scale: 1; --_1-opacity: 1; --_1-offset: 0; --_2-order: 3; --_2-scale: 0.88; --_2-opacity: 0.73; --_2-offset: -5rem; } .feature-card { grid-area: stack; transition: 600ms cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(var(--_1-offset)) scale(var(--_1-scale)); order: var(--_1-order); z-index: var(--_1-order); opacity: var(--_1-opacity); cursor: grab; user-select: none; } .glass-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
  </style>
  <div class="feature-card glass-card rounded-2xl p-8 h-full">
    <div class="flex flex-col h-full">
      <div class="flex items-center gap-3 mb-6">
        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
        </div>
        <div>
          <span class="text-xs uppercase tracking-wide text-gray-300 font-medium">Collaboration</span>
          <h3 class="text-2xl font-semibold tracking-tight">Team Sync</h3>
        </div>
      </div>
      <p class="flex-1 text-lg text-gray-300 mb-6">
        Real-time collaboration that keeps everyone aligned. Share ideas, track progress, and make decisions together.
      </p>
      <div class="space-y-3 mb-6">
        <div class="flex items-center justify-between text-sm">
          <span class="text-gray-400">Active Users</span>
          <span class="text-white font-medium">24/7</span>
        </div>
        <div class="flex items-center justify-between text-sm">
          <span class="text-gray-400">Response Time</span>
          <span class="text-white font-medium"><100ms</span>
        </div>
      </div>
      <button class="w-full py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg font-medium transition-colors">Boost team productivity 3x</button>
    </div>
  </div>
</div>