ArtDecoCryptoDataTable
Un composant de table de données simple et réactif pour les applications de crypto-monnaie/blockchain, conçu avec des motifs géométriques inspirés de l’Art déco et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.
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>Composants associés
Tableau de données
Composant de table de données réactif avec le style Material Design, avec prise en charge du mode sombre et du comportement réactif sans JavaScript. Comprend des images de remplacement pour la démonstration.
RétroVintageDataTable
Un composant de table de données réactif de style rétro/vintage utilisant Tailwind CSS avec prise en charge du mode sombre.