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.
Código HTML
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<!-- Neumorphic Container -->
<div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">
<!-- 360 Viewer Placeholder (using an image for demonstration) -->
<!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
<div class="relative w-full h-64 rounded-lg overflow-hidden
shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
<img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
<!-- Example Triadic Colors for potential UI elements layered over the image -->
<div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
</div>
<!-- Component Title -->
<div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
Interactive 360° View
</div>
<!-- User Avatar and Info -->
<div class="flex items-center justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
<div class="ml-3 text-gray-600 dark:text-gray-400">
<p class="font-medium">John Doe</p>
<p class="text-sm">Exploring the view</p>
</div>
</div>
<!-- Interactive Buttons Placeholder -->
<div class="flex justify-around mt-6">
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
Visor 360 simple (glassmorphism, escala de grises)
Un componente de visor 360 simple y receptivo con diseño de glassmorphism en escala de grises, adecuado para el comercio electrónico. Soporta el modo oscuro.
Componente de visor de 360°
Un simple componente de visor de 360° diseñado con un estilo brutalista y colores pastel, adecuado para interfaces de redes sociales.
Componente de visor de 360°
Un componente de visor de 360° sensible diseñado en un estilo 3D con soporte para temas oscuros, utilizando imágenes de marcador de posición de picsum.photos.