All Prompts
All Prompts
cardchartcryptofinancedashboardanimatedinteractivetailwind
Crypto Candlestick Chart Card
Карточка с крипто свечным графиком BTC/USD в темной теме. Анимация, фильтры, статистика. Для дашбордов, финансов.
Prompt
<div class="min-h-screen flex items-center justify-center bg-black">
<div class="overflow-hidden group bg-[#0A0B0E] w-full border-white/10 border rounded-3xl relative shadow-2xl"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(2) > div:nth-of-type(2)">
<!-- Background Effects -->
<div
class="absolute -top-[20%] -left-[10%] w-[600px] h-[600px] bg-emerald-500/10 rounded-full blur-[120px] pointer-events-none">
</div>
<div
class="absolute -bottom-[20%] -right-[10%] w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[120px] pointer-events-none">
</div>
<div class="md:p-10 pt-6 pr-6 pb-6 pl-6 relative"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3)">
<style>
@keyframes candleCycle {
0% {
transform: scaleY(0);
opacity: 0;
}
20% {
transform: scaleY(1);
opacity: 1;
}
80% {
transform: scaleY(1);
opacity: 1;
}
95% {
transform: scaleY(0);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.candle-anim {
animation: candleCycle 8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
transform-origin: bottom;
}
</style>
<!-- Header Row -->
<div class="z-10 flex flex-col gap-8 relative gap-x-8 gap-y-8">
<!-- Top Bar -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div
class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-trending-up">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline>
<polyline points="16 7 22 7 22 13" class=""></polyline>
</svg>
</div>
<h2 class="text-xl text-emerald-400 font-geist">BTC/USD Spot</h2>
</div>
<!-- Controls mimic the reference image style -->
<div class="flex items-center gap-2">
<button class="w-9 h-9 flex items-center justify-center rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 text-neutral-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
</button>
<button class="h-9 px-3 flex items-center gap-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 text-neutral-400 hover:text-white text-xs transition-colors font-geist">
Options
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
</div>
</div>
<!-- Stats & Filters -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div class="">
<div class="flex items-center gap-3 mb-1">
<span class="text-4xl md:text-5xl text-white font-geist tracking-tight font-light">$38,492.10</span>
<span class="px-2.5 py-1 rounded-md text-sm bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-[0_0_10px_rgba(16,185,129,0.2)] font-geist">+3.4%</span>
</div>
<p class="text-sm text-neutral-500 font-geist">+$1,265.40 past 24 hours</p>
</div>
<!-- Time Pills -->
<div class="flex p-1 bg-[#14181F] rounded-xl border border-white/5 shadow-inner">
<button class="px-4 py-1.5 rounded-lg text-xs text-neutral-500 hover:text-neutral-300 transition-colors font-geist">12M</button>
<button class="px-4 py-1.5 rounded-lg text-xs text-neutral-500 hover:text-neutral-300 transition-colors font-geist">30D</button>
<button class="px-4 py-1.5 rounded-lg text-xs text-neutral-500 hover:text-neutral-300 transition-colors font-geist">7D</button>
<button class="px-4 py-1.5 rounded-lg text-xs bg-emerald-500 text-white shadow-[0_0_15px_rgba(16,185,129,0.4)] font-geist">24H</button>
</div>
</div>
</div>
<!-- Chart Area -->
<div class="h-[400px] w-full relative">
<!-- Grid Lines -->
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none">
<div class="w-full h-px bg-white/5"></div>
<div class="w-full h-px bg-white/5"></div>
<div class="w-full h-px bg-white/5"></div>
<div class="w-full h-px bg-white/5"></div>
<div class="w-full h-px bg-white/5"></div>
</div>
<!-- Main Chart Layout -->
<div class="absolute inset-0 flex">
<!-- Candles Area -->
<div class="flex-1 flex items-end justify-between px-2 pb-8 relative z-10">
<!-- Highlight Overlay (Selected Range) -->
<div
class="absolute top-[10%] bottom-8 left-[35%] right-[35%] bg-gradient-to-b from-emerald-500/10 to-transparent border-x border-t border-emerald-500/20 rounded-t-lg backdrop-blur-[2px] z-0">
<div
class="absolute -top-3 -left-3 w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center backdrop-blur-md border border-emerald-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-emerald-300">
<path d="m15 18-6-6 6-6" class=""></path>
</svg>
</div>
<div
class="absolute -top-3 -right-3 w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center backdrop-blur-md border border-emerald-500/30">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-emerald-300">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</div>
</div>
<!-- Tooltip -->
<div class="absolute top-[8%] left-[50%] -translate-x-1/2 z-20">
<div
class="bg-slate-900/90 backdrop-blur-md border border-white/10 text-white text-sm py-1.5 px-3 rounded-lg shadow-xl flex items-center gap-1 font-geist">
$38,154 <span class="text-neutral-400 font-geist">USD</span>
</div>
<div class="w-px h-16 bg-white/20 mx-auto mt-1 border-r border-dashed border-white/30"></div>
</div>
<!-- Candles (Simulated with div blocks) -->
<!-- Candle Logic: Flex container for col, justify-center for wick, relative for body -->
<!-- Set 1 -->
<div class="w-2 h-[40%] flex justify-center relative group candle-anim" style="animation-delay: 0ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div
class="absolute h-[60%] w-[6px] bg-emerald-400 rounded-[1px] top-[20%] shadow-[0_0_10px_rgba(52,211,153,0.3)]">
</div>
</div>
<div class="w-2 h-[45%] flex justify-center relative group candle-anim" style="animation-delay: 100ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[30%] w-[6px] bg-emerald-400 rounded-[1px] top-[10%]"></div>
</div>
<div class="w-2 h-[35%] flex justify-center relative group candle-anim" style="animation-delay: 200ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[50%] w-[6px] bg-purple-500 rounded-[1px] top-[20%]"></div>
</div>
<div class="w-2 h-[42%] flex justify-center relative group candle-anim" style="animation-delay: 300ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[40%] w-[6px] bg-purple-500 rounded-[1px] top-[30%]"></div>
</div>
<div class="w-2 h-[30%] flex justify-center relative group candle-anim" style="animation-delay: 400ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[70%] w-[6px] bg-emerald-400 rounded-[1px] top-[15%]"></div>
</div>
<div class="w-2 h-[25%] flex justify-center relative group candle-anim" style="animation-delay: 500ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[40%] w-[6px] bg-emerald-400 rounded-[1px] top-[30%]"></div>
</div>
<div class="w-2 h-[38%] flex justify-center relative group candle-anim" style="animation-delay: 600ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[50%] w-[6px] bg-emerald-400 rounded-[1px] top-[10%]"></div>
</div>
<div class="w-2 h-[45%] flex justify-center relative group candle-anim" style="animation-delay: 700ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[30%] w-[6px] bg-purple-500 rounded-[1px] top-[40%]"></div>
</div>
<!-- Set 2 (Middle/Highlight Area) -->
<div class="w-2 h-[55%] flex justify-center relative group candle-anim" style="animation-delay: 800ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[40%] w-[6px] bg-purple-500 rounded-[1px] top-[20%]"></div>
</div>
<div class="w-2 h-[65%] flex justify-center relative group candle-anim" style="animation-delay: 900ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div
class="absolute h-[50%] w-[6px] bg-emerald-400 rounded-[1px] top-[25%] shadow-[0_0_15px_rgba(52,211,153,0.5)]">
</div>
</div>
<div class="w-2 h-[60%] flex justify-center relative group candle-anim" style="animation-delay: 1000ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[20%] w-[6px] bg-purple-500 rounded-[1px] top-[10%]"></div>
</div>
<div class="w-2 h-[50%] flex justify-center relative group candle-anim" style="animation-delay: 1100ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[60%] w-[6px] bg-purple-500 rounded-[1px] top-[20%]"></div>
</div>
<div class="w-2 h-[40%] flex justify-center relative group candle-anim" style="animation-delay: 1200ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[30%] w-[6px] bg-emerald-400 rounded-[1px] top-[40%]"></div>
</div>
<!-- Set 3 -->
<div class="w-2 h-[45%] flex justify-center relative group candle-anim" style="animation-delay: 1300ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[50%] w-[6px] bg-purple-500 rounded-[1px] top-[20%]"></div>
</div>
<div class="w-2 h-[52%] flex justify-center relative group candle-anim" style="animation-delay: 1400ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[20%] w-[6px] bg-emerald-400 rounded-[1px] top-[40%]"></div>
</div>
<div class="w-2 h-[48%] flex justify-center relative group candle-anim" style="animation-delay: 1500ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="bg-purple-500 w-[6px] h-[60%] rounded-[1px] absolute top-[10%]"></div>
</div>
<div class="w-2 h-[35%] flex justify-center relative group candle-anim" style="animation-delay: 1600ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[40%] w-[6px] bg-emerald-400 rounded-[1px] top-[30%]"></div>
</div>
<div class="w-2 h-[55%] flex justify-center relative group candle-anim" style="animation-delay: 1700ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div
class="absolute h-[50%] w-[6px] bg-emerald-400 rounded-[1px] top-[10%] shadow-[0_0_15px_rgba(52,211,153,0.4)]">
</div>
</div>
<div class="w-2 h-[65%] flex justify-center relative group candle-anim" style="animation-delay: 1800ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div class="absolute h-[30%] w-[6px] bg-emerald-400 rounded-[1px] top-[10%]"></div>
</div>
<div class="w-2 h-[62%] flex justify-center relative group candle-anim" style="animation-delay: 1900ms">
<div class="w-[1px] h-full bg-purple-500/50"></div>
<div class="absolute h-[20%] w-[6px] bg-purple-500 rounded-[1px] top-[40%]"></div>
</div>
<div class="w-2 h-[68%] flex justify-center relative group candle-anim" style="animation-delay: 2000ms">
<div class="w-[1px] h-full bg-emerald-500/50"></div>
<div
class="absolute h-[40%] w-[6px] bg-emerald-400 rounded-[1px] top-[20%] shadow-[0_0_15px_rgba(52,211,153,0.4)]">
</div>
</div>
</div>
<!-- Y Axis Labels -->
<div class="flex flex-col justify-between items-end h-full pb-8 pl-4 text-xs font-normal text-neutral-500">
<span class="font-geist">40k</span>
<span class="font-geist">35k</span>
<span class="font-geist">30k</span>
<span class="font-geist">25k</span>
<span class="font-geist">20k</span>
</div>
</div>
<!-- X Axis Labels -->
<div class="absolute bottom-0 left-0 right-10 flex justify-between text-xs font-normal text-neutral-500 px-2">
<span class="font-geist">8:00AM</span>
<span class="font-geist">9:00AM</span>
<span class="font-geist">10:00AM</span>
<span class="font-geist">11:00AM</span>
<span class="font-geist">12:00AM</span>
<span class="font-geist">01:00PM</span>
<span class="font-geist">02:00PM</span>
</div>
</div>
</div>
</div>