Componente de tablas de datos
Componente de tablas de datos responsivo con soporte de modo oscuro mediante Tailwind CSS
Código HTML
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
<table class="min-w-full leading-normal">
<thead>
<tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Name
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Role
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Status
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Created At
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
John Doe
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
></span>
<span class="relative">Active</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Jane Smith
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Editor
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
></span>
<span class="relative">Pending</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-10 h-10 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Peter Jones
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Viewer
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
></span>
<span class="relative">Inactive</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Componentes relacionados
Componente de tablas de datos
Un componente de tabla de datos responsivo con temática de estilo retro/vintage, diseñado con Tailwind CSS, compatible con el modo oscuro y con elementos de diseño nostálgicos de los años 80/90.
RetroVintageDataTable
Un componente de tabla de datos de estilo retro/vintage receptivo que utiliza Tailwind CSS con soporte para modo oscuro.
Componente de tablas de datos
Un componente de tablas de datos diseñado en un estilo skeuomórfico, que imita a sus homólogos del mundo real con efectos responsivos y admite temas oscuros. La tabla incluye encabezados, filas con datos y utiliza imágenes de marcador de posición.