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.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="w-64 h-64 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<!-- Placeholder for 360 image -->
<img src="https://picsum.photos/600/400?random=1" alt="360 viewer placeholder" class="rounded-lg">
</div>
<div class="absolute inset-x-0 bottom-4 flex justify-between px-4">
<button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #343434;
}
</style>Componentes relacionados
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° al estilo brutalismo que muestra una imagen giratoria en un diseño crudo y atrevido, 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.