Componentes Caja de luz de imagen Componente de caja de luz de imagen

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsiva simple diseñado para sitios web de comercio electrónico, con un estilo de modo oscuro y un esquema de color análogo.

Vista previa

Código HTML

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

Componentes relacionados

Caja de luz de imagen esqueuomórfica

Un componente de caja de luz de imagen receptivo con un diseño de escala de grises esqueuomórfico para carteras, compatible con el modo oscuro.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo con un diseño artístico / acuarela, colores apagados y soporte de modo oscuro, adecuado para plataformas educativas.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para tableros, con un estilo 3D y un esquema de color monocromático. Incluye efectos de desplazamiento y funcionalidad modal que utiliza Tailwind CSS para la compatibilidad con el modo oscuro.

Abrir