RétroVintageDataTable
Un composant de table de données réactif de style rétro/vintage utilisant Tailwind CSS avec prise en charge du mode sombre.
HTML Code
<!-- 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>
Composants associés
Luxury_Premium_Manufacturing_Data_Table
Un composant de table de données complexe et réactif pour une utilisation industrielle/industrielle, doté d’un design luxueux/haut de gamme avec une palette de couleurs noir et blanc et une seule couleur d’accent vive. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant Tableaux de données
Glassmorphism Data Tables Composant aux couleurs vives pour le portefeuille, réactif avec prise en charge du mode sombre. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.
Composant Tableaux de données
Composant de tables de données réactives avec prise en charge du mode sombre à l’aide de Tailwind CSS