Componente Tabelle dati
Un componente di tabelle di dati progettato in uno stile scheumorfico, che imita le controparti del mondo reale con effetti reattivi e supporta temi scuri. La tabella include intestazioni, righe con dati e utilizza immagini segnaposto.
Codice HTML
<div class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
<div class="overflow-x-auto shadow-lg rounded-lg">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">1</td>
<td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">2</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">3</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">4</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>Componenti correlati
Tabella dati lusso/premium per organizzazioni non profit/beneficenza
Un componente di tabella dati elegante e reattivo, progettato con un aspetto lussuoso/premium che utilizza toni blu aziendali, adatto per organizzazioni senza scopo di lucro e di beneficenza. Include il supporto per la modalità oscura e un'interfaccia complessa per la visualizzazione dei dati con le azioni.
Griglia di dati retrò
Un componente reattivo della tabella dei dati con un'estetica retrò/vintage degli anni '80/'90 utilizzando Tailwind CSS. Presenta un design a blocchi, accenti di colore vivaci (viola/arancione in modalità chiara, verde/neon in modalità scura) e un carattere monospace per un tocco tecnologico nostalgico. La tabella include uno stile distinto di intestazione e riga, elementi con bordi come avatar e badge di stato e supporta la modalità oscura tramite CSS. I dati segnaposto includono avatar utente, informazioni di contatto, badge di stato, ruoli e date di iscrizione. La tabella è scorrevole orizzontalmente su schermi più piccoli per una migliore reattività.