Componentes Tablas de datos Componente de tablas de datos

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.

Vista previa

Código HTML

<div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
    <div class="overflow-x-auto shadow-lg rounded-lg">
        <table class="min-w-full bg-white dark:bg-gray-800">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">1</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">2</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">3</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">4</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>

Componentes relacionados

Brutalist_ECommerce_Table

Un componente de tabla de datos receptivo de estilo brutalista para comercio electrónico, con alto contraste, un esquema de color complementario (amarillo/morado) y compatibilidad con el modo oscuro. Diseñado para listados de productos o gestión de pedidos.

Abrir