crypto market trading finance coins bitcoin dashboard table crypto market trading bitcoin ethereum price coins dashboard table cryptocurrency market overview table crypto price tracker dashboard
Crypto Market Base
Fetch pattern JSON:
curl https://webspire.de/patterns/crypto-market/base.json base.html
<section class="ws-crypto-market bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-6xl px-6">
<!-- Header -->
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="text-2xl font-bold text-slate-900">Crypto Market</h2>
<p class="mt-1 text-sm text-slate-500">Live prices and 24h changes</p>
</div>
<div class="relative">
<svg class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="search" placeholder="Search coins..." class="w-full rounded-xl border border-slate-300 bg-[var(--ws-color-surface)] py-2.5 pl-10 pr-4 text-sm text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 sm:w-64" />
</div>
</div>
<!-- Featured Coins -->
<div class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500 text-sm font-bold text-white">B</div>
<div>
<p class="text-sm font-semibold text-slate-900">Bitcoin</p>
<p class="text-xs text-slate-500">BTC</p>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-slate-900">$67,432.12</p>
<p class="mt-1 text-sm font-medium text-emerald-600">+2.34%</p>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500 text-sm font-bold text-white">E</div>
<div>
<p class="text-sm font-semibold text-slate-900">Ethereum</p>
<p class="text-xs text-slate-500">ETH</p>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-slate-900">$3,521.87</p>
<p class="mt-1 text-sm font-medium text-emerald-600">+1.12%</p>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500 text-sm font-bold text-white">S</div>
<div>
<p class="text-sm font-semibold text-slate-900">Solana</p>
<p class="text-xs text-slate-500">SOL</p>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-slate-900">$187.45</p>
<p class="mt-1 text-sm font-medium text-red-600">-1.56%</p>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 text-sm font-bold text-white">T</div>
<div>
<p class="text-sm font-semibold text-slate-900">Tether</p>
<p class="text-xs text-slate-500">USDT</p>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-slate-900">$1.00</p>
<p class="mt-1 text-sm font-medium text-emerald-600">+0.01%</p>
</div>
</div>
<!-- Market Table -->
<div class="mt-10 overflow-x-auto rounded-xl border border-slate-200">
<table class="w-full text-left text-sm">
<thead>
<tr class="border-b border-slate-200 bg-slate-50">
<th scope="col" class="px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500">#</th>
<th scope="col" class="px-5 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Coin</th>
<th scope="col" class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">Price</th>
<th scope="col" class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">24h</th>
<th scope="col" class="hidden px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500 sm:table-cell">Market Cap</th>
<th scope="col" class="hidden px-5 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500 md:table-cell">7d Chart</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4 text-slate-500">1</td>
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-xs font-bold text-white">B</div>
<div>
<p class="font-medium text-slate-900">Bitcoin</p>
<p class="text-xs text-slate-500">BTC</p>
</div>
</div>
</td>
<td class="px-5 py-4 text-right font-medium text-slate-900">$67,432.12</td>
<td class="px-5 py-4 text-right font-medium text-emerald-600">+2.34%</td>
<td class="hidden px-5 py-4 text-right text-slate-500 sm:table-cell">$1.32T</td>
<td class="hidden px-5 py-4 md:table-cell">
<div class="ml-auto h-8 w-24 rounded bg-gradient-to-r from-emerald-200 to-emerald-400 opacity-50 dark:from-emerald-800 dark:to-emerald-600"></div>
</td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4 text-slate-500">2</td>
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-500 text-xs font-bold text-white">E</div>
<div>
<p class="font-medium text-slate-900">Ethereum</p>
<p class="text-xs text-slate-500">ETH</p>
</div>
</div>
</td>
<td class="px-5 py-4 text-right font-medium text-slate-900">$3,521.87</td>
<td class="px-5 py-4 text-right font-medium text-emerald-600">+1.12%</td>
<td class="hidden px-5 py-4 text-right text-slate-500 sm:table-cell">$423.1B</td>
<td class="hidden px-5 py-4 md:table-cell">
<div class="ml-auto h-8 w-24 rounded bg-gradient-to-r from-emerald-200 to-emerald-400 opacity-50 dark:from-emerald-800 dark:to-emerald-600"></div>
</td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4 text-slate-500">3</td>
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500 text-xs font-bold text-white">T</div>
<div>
<p class="font-medium text-slate-900">Tether</p>
<p class="text-xs text-slate-500">USDT</p>
</div>
</div>
</td>
<td class="px-5 py-4 text-right font-medium text-slate-900">$1.00</td>
<td class="px-5 py-4 text-right font-medium text-emerald-600">+0.01%</td>
<td class="hidden px-5 py-4 text-right text-slate-500 sm:table-cell">$112.4B</td>
<td class="hidden px-5 py-4 md:table-cell">
<div class="ml-auto h-8 w-24 rounded bg-gradient-to-r from-slate-200 to-slate-300 opacity-50 dark:from-slate-700 dark:to-slate-600"></div>
</td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4 text-slate-500">4</td>
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-sky-500 text-xs font-bold text-white">S</div>
<div>
<p class="font-medium text-slate-900">Solana</p>
<p class="text-xs text-slate-500">SOL</p>
</div>
</div>
</td>
<td class="px-5 py-4 text-right font-medium text-slate-900">$187.45</td>
<td class="px-5 py-4 text-right font-medium text-red-600">-1.56%</td>
<td class="hidden px-5 py-4 text-right text-slate-500 sm:table-cell">$82.7B</td>
<td class="hidden px-5 py-4 md:table-cell">
<div class="ml-auto h-8 w-24 rounded bg-gradient-to-r from-red-200 to-red-400 opacity-50 dark:from-red-800 dark:to-red-600"></div>
</td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4 text-slate-500">5</td>
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white">R</div>
<div>
<p class="font-medium text-slate-900">Ripple</p>
<p class="text-xs text-slate-500">XRP</p>
</div>
</div>
</td>
<td class="px-5 py-4 text-right font-medium text-slate-900">$0.6234</td>
<td class="px-5 py-4 text-right font-medium text-emerald-600">+3.87%</td>
<td class="hidden px-5 py-4 text-right text-slate-500 sm:table-cell">$34.2B</td>
<td class="hidden px-5 py-4 md:table-cell">
<div class="ml-auto h-8 w-24 rounded bg-gradient-to-r from-emerald-200 to-emerald-400 opacity-50 dark:from-emerald-800 dark:to-emerald-600"></div>
</td>
</tr>
<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="px-5 py-4 text-slate-500">6</td>
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-violet-500 text-xs font-bold text-white">P</div>
<div>
<p class="font-medium text-slate-900">Polkadot</p>
<p class="text-xs text-slate-500">DOT</p>
</div>
</div>
</td>
<td class="px-5 py-4 text-right font-medium text-slate-900">$8.92</td>
<td class="px-5 py-4 text-right font-medium text-red-600">-0.45%</td>
<td class="hidden px-5 py-4 text-right text-slate-500 sm:table-cell">$12.1B</td>
<td class="hidden px-5 py-4 md:table-cell">
<div class="ml-auto h-8 w-24 rounded bg-gradient-to-r from-red-200 to-red-300 opacity-50 dark:from-red-800 dark:to-red-700"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
cryptomarkettradingfinancecoinsbitcoindashboardtable
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Title, subtitle, and search input. |
| featuredCoins | No | Highlighted coin cards with price and change. |
| marketTable | Yes | Data table with coin rows, price, change, market cap, chart. |