Componente visualizzatore Neumorphic 360
Un componente visualizzatore a 360° con design a neumorfismo, combinazione di colori triadici (esempio: azzurro, rosa, giallo-arancio) e complessità moderata per applicazioni di social media. Il componente è reattivo, supporta la modalità oscura utilizzando le classi Tailwind e utilizza picsum.photos per le immagini e randomuser.me per gli avatar. Non è richiesto alcun JavaScript.
Codice 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>Componenti correlati
Componente visualizzatore a 360°
Un componente visualizzatore a 360° reattivo con design scheumorfico, combinazione di colori triadica e supporto per temi scuri. Progettato per la visualizzazione dei dati e i pannelli di controllo della dashboard.
Componente visualizzatore a 360°
Un semplice componente visualizzatore reattivo a 360° progettato con lo stile Glassmorphism e una combinazione di colori pastello per il consumo di contenuti del blog, incluso il supporto della modalità scura.
Componente visualizzatore a 360°
Un componente visualizzatore reattivo a 360° con microinterazioni per i social media, con temi chiari e scuri utilizzando colori analoghi e complessità moderata.