Componente Tabelle dati
Un componente di tabelle dati progettato con lo stile Brutalismo con colori ad alta saturazione per l'e-commerce, reattivo con supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Tabella dei dati sul brutalismo
Un componente semplice e brutale della tabella dei dati con colori analoghi per siti web aziendali/aziendali. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.
Tabella di dati del gradiente arcobaleno ispirato alla carta/stampa
Un componente semplice e reattivo per la tabella dei dati con un design ispirato alla carta/stampa e un sottile sfondo sfumato arcobaleno, adatto per le dashboard. Include il supporto per la modalità oscura.
Tabella dati
Un componente di tabella dati reattivo con stile Material Design, con supporto per la modalità oscura e il comportamento reattivo senza JavaScript. Include immagini segnaposto per la dimostrazione.