Activity Feed 구성 요소
네온/글로우 효과와 생생한 색상을 가진 복잡하고 반응이 빠른 활동 피드 구성 요소로, 암호화폐/블록체인 애플리케이션에 적합하며 다크 모드를 지원합니다.
HTML 코드
<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>관련 구성 요소
Activity Feed 구성 요소
비즈니스/기업 웹사이트를 위한 Brutalist Activity Feed 구성 요소에는 유사한 색 구성표, 적당한 복잡성, 반응형 디자인 및 어두운 테마 지원이 있습니다.
ActivityFeedComponent
블로그 콘텐츠 소비를 위해 설계된 간단한 레트로/빈티지 스타일의 활동 피드 구성 요소로, 단색 파란색 구성표와 Tailwind CSS를 사용한 반응형 다크 모드 지원이 특징입니다.
브루탈리즘 단색 활동 피드
단순하고 브루탈리즘에서 영감을 받은 활동 피드 구성 요소로, 단색 색 구성표가 있으며 비즈니스/기업 웹사이트에 적합합니다. 높은 대비, 대담한 타이포그래피, 다크 모드 지원을 통한 완벽한 응답성을 제공합니다.