Componentes Visor de 360° Componente de visor de 360°

Componente de visor de 360°

Un componente de visor de 360° inspirado en Material Design con colores vibrantes para exhibir trabajos o productos, con diseño receptivo y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
        <!-- 360 Viewer Wrapper -->
        <div class="aspect-w-16 aspect-h-9">
            <img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
                <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
    </div>

    <div class="flex justify-center mt-4 space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
        <button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
    </div>
</div>

Componentes relacionados

Componente de visor de 360°

Un sencillo componente de visor de 360° diseñado para el comercio electrónico, con microinteracciones y una combinación de colores en tonos tierra, con soporte para el modo oscuro.

Abrir

PastelBrutalist360AssetViewer

Un componente de Asset Viewer de 360° simple y receptivo con un estilo de diseño brutalista y una combinación de colores rosa pastel. Diseñado para tableros, cuenta con un marcador de posición de imagen estática (que simula una vista de 360°), botones de control no funcionales y pantalla de información. Construido con Tailwind CSS, es compatible con el modo oscuro y muestra una estética cruda y audaz con bordes gruesos y sombras muy desplazadas.

Abrir

Componente Visor 360

Un componente de visor de 360 grados con diseño de cristal, combinación de colores monocromática y complejidad moderada. Está diseñado para fines de blog/contenido, es responsivo y admite el modo oscuro usando Tailwind CSS. No se incluye JavaScript, solo HTML con clases Tailwind. Utiliza picsum.photos para las imágenes.

Abrir