Componente de visor de 360°
Un componente de visor de 360 grados sensible diseñado para el comercio electrónico, con soporte para el modo oscuro. El estilo es retro/vintage con una combinación de colores pastel. Utiliza solo HTML y Tailwind CSS.
Código HTML
<div class="retro-vintage bg-gradient-to-br from-pastel-pink to-pastel-blue text-pastel-gray min-h-screen p-8 dark:from-pastel-gray dark:to-pastel-purple dark:text-pastel-pink">
<!-- Component Container -->
<div class="max-w-4xl mx-auto bg-white bg-opacity-30 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-50">
<!-- 360 Viewer Placeholder -->
<div class="relative w-full" style="padding-top: 75%;">
<!-- This is a placeholder for the 360 viewer. In a real application, a 360 viewer library/script would be initialized here. -->
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-pastel-light-gray dark:bg-pastel-dark-blue">
<p class="text-pastel-dark-gray text-xl font-bold dark:text-pastel-light-gray">360° Viewer Placeholder</p>
</div>
</div>
<!-- Product Info & Controls (placeholder) -->
<div class="p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-pastel-light-gray">Product Name</h2>
<p class="text-pastel-dark-gray mb-4 dark:text-pastel-light-gray">Product description goes here. This is a placeholder.</p>
<!-- Controls Placeholder -->
<div class="flex justify-center space-x-4">
<button class="px-4 py-2 bg-pastel-pink text-white rounded hover:bg-pastel-red transition duration-300 dark:bg-pastel-purple dark:hover:bg-pastel-pink">Rotate Left</button>
<button class="px-4 py-2 bg-pastel-blue text-white rounded hover:bg-pastel-dark-blue transition duration-300 dark:bg-pastel-pink dark:hover:bg-pastel-purple">Rotate Right</button>
</div>
</div>
</div>
</div>
Componentes relacionados
360_Viewer_Component
Un complejo componente de visor de 360° con diseño de cristal, combinación de colores en escala de grises y elementos interactivos, adecuado para plataformas educativas. Incluye capacidad de respuesta completa y soporte para modo oscuro.
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.
Componente Visor 360
Un componente de visor de 360° con un diseño neumórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con un contenedor con sombras sutiles y esquinas redondeadas, un marcador de posición de imagen y flechas de navegación con el efecto Neumórfico.