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.
Codice HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
<table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
<th class="py-3 px-4 text-left">#</th>
<th class="py-3 px-4 text-left">Avatar</th>
<th class="py-3 px-4 text-left">Name</th>
<th class="py-3 px-4 text-left">Email</th>
<th class="py-3 px-4 text-left">Phone</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">1</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">John Doe</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(123) 456-7890</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">2</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Jane Smith</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(321) 654-0987</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">3</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Mike Johnson</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(456) 789-0123</td>
</tr>
</tbody>
</table>
</div>
</div>Componenti correlati
Componente Tabelle dati
Componente Tabelle di dati reattive con supporto per la modalità oscura utilizzando Tailwind CSS
Componente Tabelle dati
Glassmorphism Data Tables Componente con colori vivaci per il portfolio, reattivo con supporto per la modalità scura. Non è necessario JavaScript, solo HTML con Tailwind CSS.