Komponente "Datentabellen"
Eine Datentabellen-Komponente, die im Brutalismus-Stil mit Farben mit hoher Sättigung für den E-Commerce entworfen wurde und mit Unterstützung für dunkle Themen reaktionsschnell ist.
HTML-Code
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
<thead class="bg-blue-600 dark:bg-blue-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Product</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Price</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Availability</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Awesome Product</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$39.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Amazing Gadget</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$29.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Limited Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Stylish Widget</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$19.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Out of Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Notify Me</a>
</td>
</tr>
</tbody>
</table>
</div>Verwandte Komponenten
Organic_Nature_Dashboard_Data_Table
Eine organische/von der Natur inspirierte Datentabellenkomponente mittlerer Komplexität für Dashboards mit einem lebendigen Farbschema mit fließenden Linien, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
ArtDecoCryptoDataTabelle
Eine einfache, reaktionsschnelle Datentabellenkomponente für Kryptowährungs-/Blockchain-Anwendungen, die mit vom Art Deco inspirierten geometrischen Mustern und einem analogen Farbschema gestaltet ist. Enthält Unterstützung für den Dunkelmodus.
Komponente "Datentabellen"
Glassmorphism Data Tables Component mit lebendigen Farben für das Portfolio, reaktionsschnell mit Unterstützung für den Dunkelmodus. Kein JavaScript erforderlich, nur HTML mit Tailwind CSS.