All Prompts
All Prompts
featuresectiondashboardanalyticsfinancetradingtailwindresponsive
Spiking Indices Live Market Data Section
Секция аналитики рынка криптовалют и акций с графиком индекса, статистикой доминирования, списком лидеров. Идеально для финансовых дашбордов.
Prompt
<section class="overflow-hidden z-10 bg-[#050507] border-white/5 border-t pt-24 pr-6 pb-24 pl-6 relative">
<!-- Background Decor -->
<div
class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[600px] h-[600px] bg-amber-500/5 blur-[120px] rounded-full pointer-events-none">
</div>
<div class="max-w-6xl mx-auto relative z-10">
<!-- Section Header -->
<div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 mb-12">
<div class="max-w-2xl">
<div class="flex items-center gap-2 mb-4">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
<span class="text-xs font-mono text-amber-500 uppercase tracking-wider">Live Market Data</span>
</div>
<h2 class="text-3xl md:text-5xl font-semibold text-white tracking-tight mb-4">
Spiking Indices
</h2>
<p class="text-slate-400 text-lg font-light leading-relaxed max-w-xl">
The pulse of the market. Track the top performing assets across Crypto, Options, Stocks, and Yield in
real-time.
</p>
</div>
<!-- Time Controls -->
<div class="flex items-center bg-[#0E1016] border border-white/5 rounded-lg p-1">
<button class="px-4 py-1.5 rounded-md text-sm font-medium text-white bg-white/5 shadow-sm border border-white/5">1H</button>
<button class="px-4 py-1.5 rounded-md text-sm font-medium text-slate-500 hover:text-slate-300 transition-colors">24H</button>
<button class="px-4 py-1.5 rounded-md text-sm font-medium text-slate-500 hover:text-slate-300 transition-colors">7D</button>
</div>
</div>
<!-- Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-5 auto-rows-[minmax(180px,auto)]">
<!-- Large Chart Card (Composite Index) -->
<div
class="md:col-span-8 p-6 md:p-8 rounded-2xl bg-[#0E1016] border border-white/5 relative overflow-hidden group hover:border-white/10 transition-all shadow-2xl shadow-black/20">
<div class="absolute top-0 right-0 p-6 opacity-0 group-hover:opacity-100 transition-opacity z-10">
<div
class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center border border-white/10 text-white backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</div>
</div>
<div class="flex items-center justify-between mb-8 relative z-10">
<div class="">
<h3 class="text-white font-medium mb-1 flex items-center gap-2">
Composite Index
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/10 text-amber-500 border border-amber-500/20">LIVE</span>
</h3>
<div class="flex items-baseline gap-3">
<span class="text-3xl font-mono text-white font-light tracking-tight">2,845.32</span>
<div
class="flex items-center gap-1 text-emerald-400 text-sm font-mono bg-emerald-500/10 px-1.5 py-0.5 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3">
<path d="M16 7h6v6" class=""></path>
<path d="m22 7-8.5 8.5-5-5L2 17" class=""></path>
</svg>
<span>+12.4%</span>
</div>
</div>
</div>
</div>
<div class="w-full h-[220px] md:h-[260px] relative z-0">
<canvas id="spikingChart" width="695" height="260"
style="display: block; box-sizing: border-box; height: 260px; width: 695.3px;" class=""></canvas>
</div>
</div>
<!-- Stat Card 1 (Top Sector) -->
<div
class="md:col-span-4 p-6 md:p-8 rounded-2xl bg-[#0E1016] border border-white/5 relative overflow-hidden flex flex-col justify-between group hover:border-white/10 transition-all shadow-2xl shadow-black/20">
<div
class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
</div>
<div class="flex items-start justify-between relative z-10">
<div class="">
<h3 class="text-slate-500 font-medium text-sm mb-1">Top Sector</h3>
<div class="text-xl text-white font-medium tracking-tight">Cryptocurrency</div>
</div>
<div
class="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500 border border-amber-500/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bitcoin" class="lucide lucide-bitcoin w-5 h-5">
<path
d="M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727"
class=""></path>
</svg>
</div>
</div>
<div class="mt-8 relative z-10">
<div class="flex items-center justify-between text-xs font-medium mb-2">
<span class="text-slate-500">Market Dominance</span>
<span class="text-white font-mono">42%</span>
</div>
<div class="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-amber-500 w-[42%] shadow-[0_0_10px_rgba(245,158,11,0.5)]"></div>
</div>
</div>
</div>
<!-- Image Card (Whale Tracking) -->
<div
class="md:col-span-4 p-0 rounded-2xl bg-[#0E1016] border border-white/5 relative overflow-hidden h-[280px] group shadow-2xl shadow-black/20">
<img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=800&q=80" alt="Whale Tracking" class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:scale-105 transition-transform duration-700 ease-out">
<div class="absolute inset-0 bg-gradient-to-t from-[#050507] via-[#050507]/40 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-8 w-full">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="waves"
class="lucide lucide-waves w-4 h-4 text-blue-400">
<path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class="">
</path>
<path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"
class=""></path>
<path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"
class=""></path>
</svg>
<span class="text-blue-400 text-xs font-bold uppercase tracking-wider">Signal Detected</span>
</div>
<h3 class="text-white font-medium text-lg tracking-tight mb-1">Whale Tracking</h3>
<p class="text-slate-400 text-sm font-light">Institutional flow detected in real-time.</p>
</div>
</div>
<!-- List Card (Top Gainers) -->
<div
class="md:col-span-4 p-6 md:p-8 rounded-2xl bg-[#0E1016] border border-white/5 overflow-hidden hover:border-white/10 transition-all shadow-2xl shadow-black/20">
<div class="flex items-center justify-between mb-6">
<h3 class="text-slate-500 font-medium text-sm">Top Gainers</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bar-chart-2" class="lucide lucide-bar-chart-2 w-4 h-4 text-slate-600">
<path d="M5 21v-6" class=""></path>
<path d="M12 21V3" class=""></path>
<path d="M19 21V9" class=""></path>
</svg>
</div>
<div class="space-y-3">
<!-- Item 1 -->
<div
class="flex items-center justify-between group cursor-pointer p-2 -mx-2 rounded-lg hover:bg-white/5 transition-colors">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-500">
<span class="text-[10px] font-bold">NV</span>
</div>
<div class="">
<div class="text-white text-sm font-medium">NVDA</div>
<div class="text-[10px] text-slate-500">Stocks</div>
</div>
</div>
<span class="text-emerald-400 text-sm font-mono bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/10">+4.2%</span>
</div>
<!-- Item 2 -->
<div
class="flex items-center justify-between group cursor-pointer p-2 -mx-2 rounded-lg hover:bg-white/5 transition-colors">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-500">
<span class="text-[10px] font-bold">ET</span>
</div>
<div class="">
<div class="text-white text-sm font-medium">ETH</div>
<div class="text-[10px] text-slate-500">Crypto</div>
</div>
</div>
<span class="text-blue-400 text-sm font-mono bg-blue-500/10 px-1.5 py-0.5 rounded border border-blue-500/10">+2.8%</span>
</div>
<!-- Item 3 -->
<div
class="flex items-center justify-between group cursor-pointer p-2 -mx-2 rounded-lg hover:bg-white/5 transition-colors">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-500">
<span class="text-[10px] font-bold">SP</span>
</div>
<div class="">
<div class="text-white text-sm font-medium">SPX</div>
<div class="text-[10px] text-slate-500">Options</div>
</div>
</div>
<span class="text-purple-400 text-sm font-mono bg-purple-500/10 px-1.5 py-0.5 rounded border border-purple-500/10">+0.9%</span>
</div>
</div>
</div>
<!-- CTA Card -->
<div
class="md:col-span-4 p-6 md:p-8 rounded-2xl bg-[#0E1016] border border-white/5 flex flex-col justify-center text-center hover:bg-white/[0.02] transition-all cursor-pointer group hover:border-amber-500/30 shadow-2xl shadow-black/20">
<div
class="w-12 h-12 mx-auto rounded-full bg-white/5 flex items-center justify-center text-slate-300 mb-4 group-hover:scale-110 transition-all duration-300 group-hover:bg-amber-500 group-hover:text-black group-hover:shadow-[0_0_20px_rgba(245,158,11,0.4)]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="arrow-right" class="lucide lucide-arrow-right w-5 h-5">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</div>
<h3 class="text-white font-medium mb-1 group-hover:text-amber-500 transition-colors">View Leaderboard</h3>
<p class="text-slate-500 text-sm font-light">Access the complete dataset across all 4 asset classes.</p>
</div>
</div>
</div>
</section>