CCHub Logo CCHub Tailwind Collection
Komponenten Aktivitäts-Feed Komponente "Aktivitätsfeed"

Komponente "Aktivitätsfeed"

Eine komplexe, reaktionsschnelle Aktivitätsfeed-Komponente mit Neon-/Leuchteffekten und leuchtenden Farben, die für Kryptowährungs-/Blockchain-Anwendungen geeignet ist und den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-violet-950 via-gray-900 to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-violet-800 dark:border-indigo-800 relative overflow-hidden">
    
    <!-- Background Glow Elements (decorative) -->
    <div class="absolute -top-16 -left-16 w-64 h-64 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-violet-700"></div>
    <div class="absolute -bottom-16 -right-16 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute top-1/4 left-1/4 w-48 h-48 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-purple-600"></div>

    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-indigo-400 dark:from-violet-300 dark:to-indigo-300 drop-shadow-lg [text-shadow:_0_0_10px_rgb(139_92_246/0.7),_0_0_20px_rgb(129_140_248/0.6)]">
      Activity Feed
    </h2>

    <div class="space-y-6 sm:space-y-8 max-h-[70vh] overflow-y-auto custom-scrollbar">

      <!-- Activity Item 1: Transaction -->
      <div class="flex items-start bg-gray-900/40 border border-violet-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-violet-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-violet-500 to-fuchsia-600 shadow-lg border border-violet-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-violet-300">Transaction Confirmed</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">0.5 <span class="text-green-400">ETH</span> Received</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">From: <span class="font-mono">0xAbc...123f</span></p>
          <p class="text-xs sm:text-sm text-purple-300 mt-2">2 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 2: NFT Mint -->
      <div class="flex items-start bg-gray-900/40 border border-indigo-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-indigo-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-indigo-500 to-blue-600 shadow-lg border border-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m1.414 1.414L9 11M3 11v-1a2 2 0 012-2h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 001.414 0l3.414-3.414a1 1 0 01.707-.293H19a2 2 0 012 2v1m-6 0a6 6 1 11-12 0 6 6 0 0112 0z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-indigo-300">New NFT Minted</p>
          <a href="#" class="text-lg sm:text-xl font-bold text-teal-400 hover:text-teal-300 transition-colors duration-200 mt-1 block">"CryptoPunk #7890"</a>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Owner: <span class="font-mono">0xDef...456e</span></p>
          <img src="https://picsum.photos/id/1018/100/100" alt="NFT Preview" class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md mt-2 border border-gray-600 shadow-md" />
          <p class="text-xs sm:text-sm text-blue-300 mt-2">15 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 3: DeFi Staking -->
      <div class="flex items-start bg-gray-900/40 border border-purple-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg border border-purple-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 3-3M3 21h18M7 21v-7a1 1 0 011-1h8a1 1 0 011 1v7M7 21h4a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1h4M12 20a1 1 0 001-1h-2a1 1 0 001 1z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-purple-300">DeFi Staking Reward</p>
          <p class="text-lg sm:text-xl font-bold text-yellow-400 mt-1">+0.02 <span class="text-yellow-300">COMP</span> Earned</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Pool: <span class="font-bold">Compound ETH-USDC</span></p>
          <p class="text-xs sm:text-sm text-pink-300 mt-2">30 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 4: Governance Vote -->
      <div class="flex items-start bg-gray-900/40 border border-teal-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-teal-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-teal-500 to-cyan-600 shadow-lg border border-teal-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 003 12c0 2.755 4.318 6.994 3.714 6.994s9.994-4.239 9.994-6.994a12.01 12.01 0 00-.382-3.04z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-teal-300">Governance Vote Cast</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">Voted 'Yes' on <span class="text-cyan-400">Proposal #123</span></p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">DAO: <span class="font-bold">Uniswap Governance</span></p>
          <p class="text-xs sm:text-sm text-cyan-300 mt-2">1 hour ago</p>
        </div>
      </div>

      <!-- Activity Item 5: Wallet Connect -->
      <div class="flex items-start bg-gray-900/40 border border-orange-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-orange-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-orange-500 to-red-600 shadow-lg border border-orange-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 11V7a4 4 0 118 0v4m-1.5 5H17a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2h4.5M11 20.5V21a1 1 0 001 1h2a1 1 0 001-1v-.5m-3 0a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-orange-300">Wallet Connected</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">MetaMask DApp Connection</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">User: <span class="font-mono">0x789...abcd</span></p>
          <p class="text-xs sm:text-sm text-red-300 mt-2">2 hours ago</p>
        </div>
      </div>

      <!-- Activity Item 6: Price Alert -->
      <div class="flex items-start bg-gray-900/40 border border-lime-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-lime-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-lime-500 to-green-600 shadow-lg border border-lime-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7l4-4m0 0l4 4m-4-4v18" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-lime-300">Price Alert Triggered</p>
          <p class="text-lg sm:text-xl font-bold text-green-400 mt-1">BTC climbed past $30,000</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Current Price: <span class="font-bold">$30,123.45</span></p>
          <p class="text-xs sm:text-sm text-green-300 mt-2">3 hours ago</p>
        </div>
      </div>

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

<style>
  /* Custom Scrollbar for Webkit browsers */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f013d; /* Dark violet/purple background */
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a78bfa; /* Light violet */
    border-radius: 10px;
    border: 2px solid #5b21b6; /* darker violet border */
    box-shadow: 0 0 8px #a78bfa; /* Glow effect */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #c4b5fd; /* Lighter violet on hover */
    box-shadow: 0 0 12px #c4b5fd; /* Stronger glow on hover */
  }

  /* Animation for background glow blobs */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  /* Glow effect for activity item borders */
  .glow-border {
    position: relative;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(139, 92, 246, 0.5), rgba(129, 140, 248, 0.5)); /* Violet to Indigo */
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.1);
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
    background: linear-gradient(to bottom, rgba(31, 0, 61, 0.5), rgba(0, 0, 0, 0.4));
  }

  .group:hover .glow-border {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5), inset 0 0 10px rgba(139, 92, 246, 0.2), 0 0 30px rgba(129, 140, 248, 0.3); 
    transform: translateY(-2px); /* Slight lift on hover */
    border-image-source: linear-gradient(to right, rgba(139, 92, 246, 0.8), rgba(129, 140, 248, 0.8)); /* Stronger border glow */
  }

  /** Dark mode considerations for glow and backgrounds if ever needed to be different, but current design uses same dark gradient for main container */
  .dark .glow-border {
      /* Can be tweaked for a different dark mode glow if desired */
  }

</style>

Verwandte Komponenten

Komponente "Aktivitätsfeed"

Eine komplexe, monochromatische Aktivitäts-Feed-Komponente im Dunkelmodus für Sport-/Fitnessanwendungen, die verschiedene Benutzerinteraktionen, Erfolge und Aktualisierungen reaktionsschnell darstellt.

Offen

Komponente "Aktivitätsfeed"

Eine einfache, reaktionsschnelle Aktivitäts-Feed-Komponente mit einer Cyberpunk-Herbst-Ästhetik mit dunklem Hintergrund, satten Orange-, Braun- und Burgundertönen, die sich für Sport-/Fitnessanwendungen eignet. Inklusive Unterstützung für den Dunkelmodus.

Offen

Komponente "Aktivitätsfeed"

Eine Aktivitäts-Feed-Komponente im Retro-/Vintage-Stil zur Präsentation von Arbeiten oder Produkten. Das Design verfügt über ein analoges Farbschema mit Unterstützung für dunkle Themen. Die Komponente ist interaktiv und reaktionsschnell und eignet sich für die Verwendung in Portfolios.

Offen