Visor 360 simple (glassmorphism, escala de grises)
Un componente de visor 360 simple y receptivo con diseño de glassmorphism en escala de grises, adecuado para el comercio electrónico. Soporta el modo oscuro.
Código HTML
```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
<!-- 360 Viewer Area (Placeholder) -->
<div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
<!-- In a real implementation, a JavaScript library or iframe would go here -->
</div>
<!-- Product Info -->
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
<button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
</div>
</div>
</div>
</div>
```Componentes relacionados
Componente de visor de 360°
Un componente de visor de 360° diseñado con microinteracciones, con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de visor de 360°
Un componente de visor de 360° diseñado en un estilo brutalista, con alto contraste y diseños inusuales, que admite temas oscuros y efectos de diseño responsivos.
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.