Componente Tabelle dati
Un componente di tabella dati minimalista e reattivo progettato con Tailwind CSS che supporta la modalità oscura.
Codice HTML
<div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
<table class="min-w-full border-collapse">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900">
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
</tbody>
</table>
</div>Componenti correlati
Componente Tabelle dati
Componente Tabelle di dati reattive con supporto per la modalità oscura utilizzando Tailwind CSS
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.
Componente Tabelle dati
Un semplice componente della tabella dati con colori del tono della terra, micro-interazioni e supporto per la modalità oscura, adatto per le interfacce dei social media.