ArtDecoCryptoDataTable
A simple, responsive data table component for cryptocurrency/blockchain applications, designed with Art Deco-inspired geometric patterns and an analogous color scheme. Includes dark mode support.
HTML Code
<div class="font-sans p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-teal-50 dark:from-gray-950 dark:to-teal-950 text-gray-800 dark:text-gray-100 min-h-screen">
<!-- Table Container -->
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-green-200 dark:border-teal-700
transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
<!-- Header with Art Deco flair -->
<div class="px-6 py-4 border-b border-green-300 dark:border-teal-700 bg-green-100 dark:bg-gray-900
relative overflow-hidden">
<h2 class="text-2xl sm:text-3xl font-bold text-teal-800 dark:text-teal-400 mb-2 tracking-wider uppercase font-serif">
Crypto Asset Overview
</h2>
<p class="text-sm text-green-700 dark:text-teal-300">Live market data for your blockchain journey.</p>
<!-- Art Deco geometric pattern overlay -->
<div class="absolute inset-0 opacity-20 dark:opacity-10 pointer-events-none">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 L25 100 L50 0 L75 100 L100 0 Z" fill="none" stroke="currentColor" stroke-width="1" class="text-teal-600 dark:text-teal-400"/>
<path d="M0 100 L25 0 L50 100 L75 0 L100 100 Z" fill="none" stroke="currentColor" stroke-width="1" class="text-green-600 dark:text-green-400"/>
</svg>
</div>
</div>
<!-- Table Wrapper -->
<div class="overflow-x-auto relative">
<table class="min-w-full divide-y divide-green-200 dark:divide-teal-700">
<thead class="bg-green-50 dark:bg-gray-850 font-medium text-xs uppercase tracking-wider text-green-700 dark:text-teal-300">
<tr>
<th scope="col" class="px-6 py-3 text-left">Asset</th>
<th scope="col" class="px-6 py-3 text-right">Price</th>
<th scope="col" class="px-6 py-3 text-right hidden sm:table-cell">24h Change</th>
<th scope="col" class="px-6 py-3 text-right hidden md:table-cell">Volume (24h)</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-green-100 dark:divide-teal-800">
<!-- Row 1 -->
<tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/60/100/100" alt="Bitcoin Logo">
<span class="font-semibold">Bitcoin</span>
<span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">BTC</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$65,432.10</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400 hidden sm:table-cell">+1.23%</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$34.5B</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/66/100/100" alt="Ethereum Logo">
<span class="font-semibold">Ethereum</span>
<span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">ETH</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$3,210.50</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400 hidden sm:table-cell">-0.87%</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$18.2B</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/67/100/100" alt="Cardano Logo">
<span class="font-semibold">Cardano</span>
<span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">ADA</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$0.4567</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400 hidden sm:table-cell">+2.10%</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$0.5B</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/68/100/100" alt="Solana Logo">
<span class="font-semibold">Solana</span>
<span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">SOL</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$145.80</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400 hidden sm:table-cell">-1.55%</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$1.2B</td>
</tr>
</tbody>
</table>
</div>
<!-- Footer -->
<div class="px-6 py-3 border-t border-green-200 dark:border-teal-700 bg-green-100 dark:bg-gray-900 text-right text-xs text-green-700 dark:text-teal-300">
Data provided by Placeholder API. Last updated: <time datetime="2023-10-27T10:00:00Z">Oct 27, 2023</time>
</div>
</div>
</div>Related Components
Social Media Data Table Monochromatic 3D Simple
A simple, monochromatic 3D design data table component for social media interfaces with dark theme support.
Retro Data Grid
A responsive data table component styled with a retro/vintage 80s/90s aesthetic using Tailwind CSS. It features a blocky design, vibrant color accents (purple/orange in light mode, green/neon in dark mode), and a monospace font for a nostalgic tech feel. The table includes distinct header and row styling, bordered elements like avatars and status badges, and supports dark mode via CSS. Placeholder data includes user avatars, contact information, status badges, roles, and join dates. The table is horizontally scrollable on smaller screens for better responsiveness.
Organic_Nature_Dashboard_Data_Table
A moderate complexity, organic/nature-inspired data table component for dashboards with a vibrant color scheme, featuring flowing lines, responsiveness, and dark mode support.