Componente Tabelle dati
Un componente di tabella dati reattivo con un design minimalista e piatto, adatto per siti Web aziendali/aziendali, con supporto per temi scuri.
Codice HTML
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700">
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
</tbody>
</table>
</div>Componenti correlati
Componente Tabelle dati
Componente Tabelle di dati reattive con supporto per la modalità oscura utilizzando Tailwind CSS
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à.
Componente Tabelle dati
Un componente reattivo per le tabelle di dati progettato con lo stile Neumorphism utilizzando Tailwind CSS, con supporto per temi scuri e immagini segnaposto casuali.