Componente de visor de 360°
Un componente de visor de 360° con diseño responsivo y soporte de temas oscuros usando Tailwind CSS. Utiliza CSS para animaciones e interacciones para una sensación de microinteracción. Sin JavaScript.
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="relative w-64 h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
<div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
<div class="text-white text-xl font-bold">View 360</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de visor de 360°
Un componente de visor de 360° con diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros. Diseñado para paneles de control, visualización de datos y paneles de control.
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.