Tabella RetroVintageDataTable
Un componente reattivo della tabella dati in stile retrò/vintage che utilizza Tailwind CSS con supporto per la modalità scura.
Codice HTML
<!-- Retro Vintage Data Table Component -->
<div class="overflow-x-auto bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl border-4 border-teal-700 dark:border-teal-900 font-sans">
<table class="min-w-full border-collapse border-spacing-0">
<thead>
<tr class="bg-teal-700 dark:bg-teal-900 text-gray-100 text-sm uppercase">
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Name</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Title</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Status</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Role</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Image</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-300 dark:divide-gray-600 text-gray-800 dark:text-gray-200 text-sm">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
Rickard Andersson
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Software Engineer</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1015/60/40" alt="Random Image">
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
Alice Johnson
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Product Manager</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Pending</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Admin</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1018/60/40" alt="Random Image">
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Avatar">
Bob Williams
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">UX Designer</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Inactive</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1024/60/40" alt="Random Image">
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
Jane Smith
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Marketing Specialist</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1025/60/40" alt="Random Image">
</td>
</tr>
</tbody>
</table>
</div>
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.
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.
Componente Tabelle dati
Un componente Data Table reattivo con design del neumorfismo, una combinazione di colori triadica e supporto per la modalità scura, adatto per un blog o un sito di contenuti.