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.
Código HTML
<div class="relative w-full h-96 overflow-hidden bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<div class="absolute inset-0 flex items-center justify-center">
<img src="https://picsum.photos/400/300" alt="360 View" class="transition-transform duration-300 transform hover:scale-110" />
</div>
<div class="absolute inset-0 flex items-center justify-center">
<img src="https://picsum.photos/400/300?blur" alt="360 View" class="transition-opacity duration-300 opacity-0 hover:opacity-100" />
</div>
<div class="absolute inset-0 flex items-center justify-center">
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition duration-300">
Rotate
</button>
</div>
</div>
<div class="mt-4 text-center">
<h2 class="text-xl font-semibold dark:text-white">Explore Our 360° View</h2>
<p class="text-gray-600 dark:text-gray-400">Hover over the image to see the effect!</p>
</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.
Componente de visor de 360 grados
Componente de visor de 360 grados con microinteracciones, combinación de colores triádica, complejidad compleja, propósito de comercio electrónico, diseño receptivo, soporte de temas oscuros y Tailwind CSS.
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.