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
Grille de données rétro
Un composant de table de données réactif avec une esthétique rétro/vintage des années 80/90 utilisant Tailwind CSS. Il présente un design en blocs, des accents de couleurs vibrantes (violet/orange en mode clair, vert/néon en mode sombre) et une police monospace pour une sensation de technologie nostalgique. Le tableau comprend un style d’en-tête et de ligne distinct, des éléments bordés tels que des avatars et des badges de statut, et prend en charge le mode sombre via CSS. Les données d’espace réservé comprennent les avatars des utilisateurs, les coordonnées, les badges de statut, les rôles et les dates d’adhésion. La table est défilante horizontalement sur des écrans plus petits pour une meilleure réactivité.
Tableau de données des médias sociaux Monochromatique 3D Simple
Un composant de table de données de conception 3D simple et monochrome pour les interfaces de médias sociaux avec prise en charge du thème sombre.
Tableau de données sur le brutalisme
Un composant de table de données réactif au design brutaliste, avec prise en charge du mode sombre et des effets de survol.