Componente de tablas de datos
Un componente de tabla de datos simple con colores de tono tierra, microinteracciones y soporte de modo oscuro, adecuado para interfaces de redes sociales.
Código HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
User
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Joined
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<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/85.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
John Doe
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Active
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jan 10, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<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/45.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jane Smith
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Pending
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Feb 15, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<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/60.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Peter Jones
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Inactive
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Mar 20, 2023
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Componentes relacionados
Componente de tablas de datos
Tabla de datos responsiva para panel de control con soporte de tema oscuro
Componente de tablas de datos
Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.
Tabla de datos artísticos de acuarela
Un componente de tabla de datos receptivo con un estilo de diseño suave, acuarela / artístico y colores dulces como caramelos, adecuado para organizaciones sin fines de lucro / caridad. Incluye compatibilidad con el modo oscuro y muestra una complejidad moderada con un enfoque en el atractivo visual y la legibilidad.