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

Componente de caja de luz de imagen

Un componente de caja de luz de imagen de estilo brutalista adecuado para un blog o plataforma de contenido, diseñado con tonos tierra y elementos interactivos complejos.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico con un estilo de diseño plano minimalista, que admite temas claros y oscuros utilizando Tailwind CSS.

Abrir

Componente de caja de luz de imagen retro

Un componente de caja de luz de imagen simple y receptivo con diseño retro / vintage, combinación de colores análoga y soporte de modo oscuro, adecuado para blogs y sitios de contenido.

Abrir