Componente de visor de 360°
Un componente de visor minimalista de 360° creado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 transition-all duration-300">
<div class="relative w-full max-w-lg h-72 overflow-hidden rounded-lg shadow-lg">
<img src="https://picsum.photos/800/600?random=1" alt="360° View" class="object-cover w-full h-full transition-transform duration-500 hover:scale-105">
</div>
<div class="mt-4 text-center">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer Component</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Experience immersive views with our 360° viewer.</p>
</div>
<div class="mt-4 flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
</div>
</div>Componentes relacionados
Visor retro 360
Componente de visor retro de 360° con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. Utiliza imágenes de marcador de posición de picsum.photos.
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.
Componente de visor de 360°
Un componente de visor de 360° diseñado con un estilo esqueuomórfico, utilizando un esquema de color en escala de grises. Cuenta con una interfaz de complejidad media adecuada para aplicaciones de redes sociales, que admite temas claros y oscuros.