Загрузка...
Скриптовый виджет списка криптовалют в Tailwind CSS. Отображает логотипы, цены, % изменения и графики. Автоматическая прокрутка CSS marquee с градиентами. Для дашбордов и финтех.
<div class="sm:p-6 relative overflow-hidden bg-neutral-900/50 border-white/5 border rounded-3xl pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center justify-between mb-4">
<div class="text-sm font-medium text-neutral-300">Watchlist</div>
<div class="inline-flex items-center gap-2 text-xs text-neutral-400">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span> Live
</div>
</div>
<!-- Columns -->
<div class="grid grid-cols-2 gap-4">
<!-- Column A (scrolls top -> bottom) -->
<div data-vert-marquee="" data-dir="down" data-speed="1.2" class="relative h-80 sm:h-96 overflow-y-scroll pr-1" style="scrollbar-width: none; -ms-overflow-style: none;" data-_init="1">
<ul data-track="" class="space-y-3" style="animation: scrollDown 20s linear infinite;">
<!-- NEM -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="shield" class="lucide lucide-shield h-4 w-4 text-neutral-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">NEM</div>
<div class="text-[10px] text-neutral-500">$0.0193</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- sparkline (red) -->
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90" aria-hidden="true">
<path d="M1 16 L10 10 L18 12 L26 7 L33 9 L41 6 L49 9 L57 5 L66 8" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.0193</div>
<div class="text-xs text-rose-400">24.80%</div>
</div>
</div>
</li>
<!-- XRP -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="share-2" class="lucide lucide-share-2 h-4 w-4 text-neutral-300"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">XRP</div>
<div class="text-[10px] text-neutral-500">$2.14</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 14 L8 15 L16 12 L22 14 L30 9 L38 12 L46 8 L54 11 L63 6 L71 9" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$2.14</div>
<div class="text-xs text-emerald-300">13.45%</div>
</div>
</div>
</li>
<!-- EDR -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="equal" class="lucide lucide-equal h-4 w-4 text-neutral-300"><line x1="5" x2="19" y1="9" y2="9" class=""></line><line x1="5" x2="19" y1="15" y2="15" class=""></line></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">EDR</div>
<div class="text-[10px] text-neutral-500">$0.0049</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 8 L10 11 L18 10 L26 12 L34 9 L42 11 L50 8 L58 10 L66 6" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.0049</div>
<div class="text-xs text-rose-400">4.80%</div>
</div>
</div>
</li>
<!-- VIN -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="link-2" class="lucide lucide-link-2 h-4 w-4 text-neutral-300"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">VIN</div>
<div class="text-[10px] text-neutral-500">$0.026889</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 16 L8 14 L16 12 L24 13 L32 10 L40 12 L48 9 L56 11 L64 8" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.026889</div>
<div class="text-xs text-emerald-300">4.75%</div>
</div>
</div>
</li>
<!-- ETH -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="droplets" class="lucide lucide-droplets h-4 w-4 text-neutral-300"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" class=""></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" class=""></path></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">ETH</div>
<div class="text-[10px] text-neutral-500">$1,829.04</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 18 L9 12 L17 14 L25 10 L33 9 L41 11 L49 8 L57 9 L65 7" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$1,829.04</div>
<div class="text-xs text-emerald-300">2.55%</div>
</div>
</div>
</li>
<!-- Duplicate content for seamless loop -->
<!-- NEM -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="shield" class="lucide lucide-shield h-4 w-4 text-neutral-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">NEM</div>
<div class="text-[10px] text-neutral-500">$0.0193</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90" aria-hidden="true">
<path d="M1 16 L10 10 L18 12 L26 7 L33 9 L41 6 L49 9 L57 5 L66 8" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.0193</div>
<div class="text-xs text-rose-400">24.80%</div>
</div>
</div>
</li>
<!-- XRP -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="share-2" class="lucide lucide-share-2 h-4 w-4 text-neutral-300"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">XRP</div>
<div class="text-[10px] text-neutral-500">$2.14</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 14 L8 15 L16 12 L22 14 L30 9 L38 12 L46 8 L54 11 L63 6 L71 9" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$2.14</div>
<div class="text-xs text-emerald-300">13.45%</div>
</div>
</div>
</li>
<!-- EDR -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="equal" class="lucide lucide-equal h-4 w-4 text-neutral-300"><line x1="5" x2="19" y1="9" y2="9" class=""></line><line x1="5" x2="19" y1="15" y2="15" class=""></line></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">EDR</div>
<div class="text-[10px] text-neutral-500">$0.0049</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 8 L10 11 L18 10 L26 12 L34 9 L42 11 L50 8 L58 10 L66 6" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.0049</div>
<div class="text-xs text-rose-400">4.80%</div>
</div>
</div>
</li>
<!-- VIN -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="link-2" class="lucide lucide-link-2 h-4 w-4 text-neutral-300"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">VIN</div>
<div class="text-[10px] text-neutral-500">$0.026889</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 16 L8 14 L16 12 L24 13 L32 10 L40 12 L48 9 L56 11 L64 8" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.026889</div>
<div class="text-xs text-emerald-300">4.75%</div>
</div>
</div>
</li>
<!-- ETH -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="droplets" class="lucide lucide-droplets h-4 w-4 text-neutral-300"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" class=""></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">ETH</div>
<div class="text-[10px] text-neutral-500">$1,829.04</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 18 L9 12 L17 14 L25 10 L33 9 L41 11 L49 8 L57 9 L65 7" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$1,829.04</div>
<div class="text-xs text-emerald-300">2.55%</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Column B (scrolls bottom -> top) -->
<div data-vert-marquee="" data-dir="up" data-speed="1.2" class="relative h-80 sm:h-96 overflow-y-scroll pl-1" style="scrollbar-width: none; -ms-overflow-style: none;" data-_init="1">
<ul data-track="" class="space-y-3" style="animation: scrollUp 20s linear infinite;">
<!-- BNB -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="box" class="lucide lucide-box h-4 w-4 text-neutral-300"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path><path d="m3.3 7 8.7 5 8.7-5" class=""></path><path d="M12 22V12" class=""></path></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">BNB</div>
<div class="text-[10px] text-neutral-500">$604.76</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 17 L9 14 L16 12 L24 15 L31 10 L39 12 L47 9 L55 11 L63 7 L71 9" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$604.76</div>
<div class="text-xs text-emerald-300">7.40%</div>
</div>
</div>
</li>
<!-- GXS -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="circle-dot" class="lucide lucide-circle-dot h-4 w-4 text-neutral-300"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="1" class=""></circle></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">GXS</div>
<div class="text-[10px] text-neutral-500">$0.55</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 6 L10 9 L18 8 L26 10 L34 9 L42 11 L50 8 L58 9 L66 7" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.55</div>
<div class="text-xs text-rose-400">8.20%</div>
</div>
</div>
</li>
<!-- PPC -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="pie-chart" class="lucide lucide-pie-chart h-4 w-4 text-neutral-300"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" class=""></path><path d="M21.21 15.89A10 10 0 1 1 8 2.83" class=""></path></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">PPC</div>
<div class="text-[10px] text-neutral-500">$0.2778</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 9 L9 8 L17 10 L25 7 L33 9 L41 7 L49 10 L57 6 L65 8" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.2778</div>
<div class="text-xs text-rose-400">27.35%</div>
</div>
</div>
</li>
<!-- HOT -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="flame" class="lucide lucide-flame h-4 w-4 text-neutral-300"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" class=""></path></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">HOT</div>
<div class="text-[10px] text-neutral-500">$0.009484</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 7 L8 10 L16 9 L24 11 L32 8 L40 10 L48 7 L56 9 L64 6" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.009484</div>
<div class="text-xs text-rose-400">7.25%</div>
</div>
</div>
</li>
<!-- PHR -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="activity" class="lucide lucide-activity h-4 w-4 text-neutral-300"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">PHR</div>
<div class="text-[10px] text-neutral-500">$0.057030</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 15 L8 13 L16 12 L24 14 L32 11 L40 12 L48 10 L56 12 L64 9" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.057030</div>
<div class="text-xs text-emerald-300">2.55%</div>
</div>
</div>
</li>
<!-- Duplicate content for seamless loop -->
<!-- BNB -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="box" class="lucide lucide-box h-4 w-4 text-neutral-300"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path><path d="m3.3 7 8.7 5 8.7-5" class=""></path><path d="M12 22V12" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">BNB</div>
<div class="text-[10px] text-neutral-500">$604.76</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 17 L9 14 L16 12 L24 15 L31 10 L39 12 L47 9 L55 11 L63 7 L71 9" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$604.76</div>
<div class="text-xs text-emerald-300">7.40%</div>
</div>
</div>
</li>
<!-- GXS -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="circle-dot" class="lucide lucide-circle-dot h-4 w-4 text-neutral-300"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="1" class=""></circle></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">GXS</div>
<div class="text-[10px] text-neutral-500">$0.55</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 6 L10 9 L18 8 L26 10 L34 9 L42 11 L50 8 L58 9 L66 7" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.55</div>
<div class="text-xs text-rose-400">8.20%</div>
</div>
</div>
</li>
<!-- PPC -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="pie-chart" class="lucide lucide-pie-chart h-4 w-4 text-neutral-300"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" class=""></path><path d="M21.21 15.89A10 10 0 1 1 8 2.83" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">PPC</div>
<div class="text-[10px] text-neutral-500">$0.2778</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 9 L9 8 L17 10 L25 7 L33 9 L41 7 L49 10 L57 6 L65 8" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.2778</div>
<div class="text-xs text-rose-400">27.35%</div>
</div>
</div>
</li>
<!-- HOT -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="flame" class="lucide lucide-flame h-4 w-4 text-neutral-300"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" class=""></path></svg>
</span>
<div class="">
<div class="text-sm font-medium text-neutral-200">HOT</div>
<div class="text-[10px] text-neutral-500">$0.009484</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 7 L8 10 L16 9 L24 11 L32 8 L40 10 L48 7 L56 9 L64 6" stroke="rgb(244,63,94)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.009484</div>
<div class="text-xs text-rose-400">7.25%</div>
</div>
</div>
</li>
<!-- PHR -->
<li class="rounded-2xl border border-white/5 bg-neutral-900/60 ring-1 ring-white/5 px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-800/60 ring-1 ring-white/10">
<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" data-lucide="activity" class="lucide lucide-activity h-4 w-4 text-neutral-300"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-neutral-200">PHR</div>
<div class="text-[10px] text-neutral-500">$0.057030</div>
</div>
</div>
<div class="flex items-center gap-3">
<svg width="72" height="22" viewBox="0 0 72 22" class="opacity-90">
<path d="M1 15 L8 13 L16 12 L24 14 L32 11 L40 12 L48 10 L56 12 L64 9" stroke="rgb(16,185,129)" stroke-width="2" fill="none" class=""></path>
</svg>
<div class="text-right">
<div class="text-sm text-neutral-300">$0.057030</div>
<div class="text-xs text-emerald-300">2.55%</div>
</div>
</div>
</li>
</ul>
</div>
<!-- CSS Animation Styles -->
<style>
@keyframes scrollDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
@keyframes scrollUp {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
</style>
</div>
<!-- Fades -->
<div class="pointer-events-none absolute inset-x-3 top-12 h-10 bg-gradient-to-b from-neutral-900/80 to-transparent"></div>
<div class="pointer-events-none absolute inset-x-3 bottom-3 h-10 bg-gradient-to-t from-neutral-900/80 to-transparent"></div>
</div>