RetroVintageDataTable
Un componente de tabla de datos de estilo retro/vintage receptivo que utiliza Tailwind CSS con soporte para modo oscuro.
Código 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>
Componentes relacionados
Componente de tablas de datos
Un componente de tablas de datos responsivo diseñado con el estilo Neumorphism utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición aleatorio.
Tabla de datos de lujo/premium para organizaciones sin fines de lucro/caridad
Un componente de tabla de datos elegante y receptivo diseñado con una sensación de lujo/premium utilizando tonos azules corporativos, adecuado para organizaciones benéficas y sin fines de lucro. Incluye soporte para modo oscuro y una interfaz compleja para mostrar datos con acciones.
Componente de tablas de datos
Un componente de tablas de datos responsivo diseñado en estilo skeuomórfico con soporte para temas oscuros utilizando Tailwind CSS.