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
Data Tables Component
A responsive Data Table component with Neumorphism design, a triadic color scheme, and dark mode support, suitable for a blog or content site.
Data Tables Component
A responsive data tables component designed with Neumorphism style using Tailwind CSS, featuring dark theme support and random placeholder images.
Data Tables Component
A responsive data table component for documentation/wiki sites, featuring dark mode support, earth-tone color scheme, and semantic HTML. Designed for complex interfaces with multiple columns, actions, and pagination.