Componente de visor de 360°
Un componente de visor de 360° de estilo retro/vintage para mostrar trabajos o productos en un portafolio, diseñado con Tailwind CSS con una interfaz compleja que presenta múltiples elementos interactivos y admite el modo oscuro.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
<div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
<img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
</div>
<div class="mt-6 flex justify-center space-x-4">
<button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
<button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
</div>
<div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
<h3 class="text-lg font-semibold text-white">Product Details:</h3>
<p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
</div>
<div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
<h3 class="text-lg font-semibold text-white">Team Members:</h3>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
</div>
</div>
</div>Componentes relacionados
Componente de visor de 360°
Un componente de visor de 360° sensible diseñado para paneles con un estilo de diseño 3D y soporte para el modo oscuro.
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.
Componente de visor Neumorphic 360
Un componente de visor de 360° con diseño de neumorfismo, esquema de color triádico (ejemplo: azul claro, rosa, amarillo-naranja) y complejidad moderada para aplicaciones de redes sociales. El componente es responsivo, admite el modo oscuro mediante clases Tailwind y utiliza picsum.photos para las imágenes y randomuser.me para los avatares. No se requiere JavaScript.