Componente Tabelle dati
Un componente reattivo per le tabelle di dati progettato in stile Skeuomorphic con supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 text-center">
<img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
</div>
</div>Componenti correlati
Luxury_Premium_Manufacturing_Data_Table
Un componente complesso e reattivo per la tabella dei dati per uso manifatturiero/industriale, caratterizzato da un design di lusso/premium con una combinazione di colori in bianco e nero e un unico colore d'accento brillante. Include il supporto per la modalità oscura ed elementi interattivi.
Skeuomorphic_Earth_Tone_Data_Table
Una tabella di dati semplice e reattiva con uno stile di design scheumorfico e una combinazione di colori color terra, adatta per siti Web aziendali/aziendali. Include il supporto per la modalità oscura.