Componente de tablas de datos
Componente de tablas de datos de Glassmorphism con colores vibrantes para la cartera, responsivo con soporte para modo oscuro. No se necesita JavaScript, solo HTML con Tailwind CSS.
Código HTML
<div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
<div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
<h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
<div class="overflow-x-auto">
<table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
<thead>
<tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
<th class="px-6 py-3">Project Name</th>
<th class="px-6 py-3">Category</th>
<th class="px-6 py-3">Status</th>
<th class="px-6 py-3">Preview</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Vibrant Dash</td>
<td class="px-6 py-4">Dashboard UI</td>
<td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">AquaFlow Landing</td>
<td class="px-6 py-4">Website</td>
<td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Neon Chatbot</td>
<td class="px-6 py-4">Application</td>
<td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Retro Portfolio</td>
<td class="px-6 py-4">Portfolio</td>
<td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Componentes relacionados
Industrial_Gaming_Data_Table
Un componente de tabla de datos complejo y receptivo diseñado para sitios web de juegos, con una estética industrial con elementos expuestos y una combinación de colores otoñales. Incluye filtrado, ordenación, paginación y compatibilidad con el modo oscuro.
Skeuomorphic_Earth_Tone_Data_Table
Una tabla de datos simple y receptiva con un estilo de diseño esqueuomórfico y una combinación de colores en tonos tierra, adecuada para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.
Job_Application_Data_Table
Un componente de tabla de datos interactivo y con capacidad de respuesta para aplicaciones de trabajo, diseñado con un estilo tipográfico suizo/internacional limpio y minimalista y una combinación de colores apagados. Incluye filtrado, ordenación, paginación y compatibilidad con el modo oscuro.