Slack Integration Card

<div class="group bg-gray-900/30 hover:bg-gray-900/50 border border-gray-700/50 hover:border-green-500/30 rounded-2xl p-6 backdrop-blur-sm transition-all duration-500 hover:shadow-2xl hover:shadow-green-500/20" style="transform: none;">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-8px) scale(1.02); }
  </style>
  <div class="hover-lift text-left" style="font-family: 'Inter', sans-serif;">
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
          <i data-lucide="hash" class="w-5 h-5 text-white"></i>
        </div>
        <div>
          <h3 class="font-semibold text-white group-hover:text-green-400 transition-colors duration-300">Slack</h3>
          <p class="text-xs text-gray-400">#product-updates</p>
        </div>
      </div>
      <div class="flex items-center gap-1">
        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        <span class="text-xs text-green-400 font-medium">Live</span>
      </div>
    </div>
    <div class="space-y-3">
      <div class="flex gap-3 bg-gray-700/20 border border-gray-800 rounded-lg p-3 hover:bg-gray-700/30 hover:border-gray-700 transition-all duration-300">
        <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
          <span class="text-xs font-bold text-white">M</span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-white mb-1">Marcus Rivera</p>
          <p class="text-sm text-gray-300">🚀 Product v2.1 deployed successfully!</p>
          <div class="flex items-center gap-4 mt-2 text-xs text-gray-400">
            <span>2 min ago</span>
            <div class="flex items-center gap-1">
              <i data-lucide="check-circle-2" class="w-3 h-3 text-green-400"></i>
              <span>CI/CD Pipeline</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between text-xs text-gray-500 px-1">
        <span class="flex items-center gap-1 hover:text-green-400 transition-colors duration-300">
          <i data-lucide="users" class="w-3 h-3"></i>
          <span>47 online</span>
        </span>
        <span class="flex items-center gap-1 hover:text-green-400 transition-colors duration-300">
          <i data-lucide="bell" class="w-3 h-3"></i>
          <span>3 mentions</span>
        </span>
      </div>
    </div>
    <button class="w-full mt-4 px-4 py-2.5 bg-green-600/20 hover:bg-green-600/40 border border-green-500/30 hover:border-green-500/60 text-green-400 text-sm font-medium rounded-lg transition-all duration-300 flex items-center justify-center gap-2 hover:scale-105">
      Reply in Thread
      <i data-lucide="message-circle" class="w-4 h-4"></i>
    </button>
  </div>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <script>lucide.createIcons();</script>
</div>