Componente visualizzatore Glassmorphism 360
Componente visualizzatore a 360° Glassmorphism per una dashboard con una combinazione di colori triadica, complessità semplice, design reattivo e supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-lg p-6 bg-white bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center">Product 360° View</h2>
<div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/seed/tool/600/400" alt="360 Product View" class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-20 dark:bg-blue-800 dark:bg-opacity-20 transform rotate-45 scale-150 opacity-0 transition-opacity duration-300 hover:opacity-100">
<p class="text-white text-lg font-bold -rotate-45">360°</p>
</div>
</div>
<div class="flex justify-around items-center">
<button class="p-3 rounded-full bg-red-400 text-white dark:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
<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="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</button>
<button class="p-3 rounded-full bg-green-400 text-white dark:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
<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="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</div>Componenti correlati
360_Viewer_Component_Watercolor_Corporate_Blues
Un complesso componente visualizzatore a 360° con uno stile di design artistico/acquerello e una combinazione di colori blu aziendale, specificamente progettato per i sistemi di prenotazione e prenotazione. È dotato di più elementi interattivi ed è completamente reattivo con il supporto della modalità oscura.
Componente visualizzatore 360
Un componente visualizzatore a 360 gradi con design Glassmorphism, combinazione di colori monocromatici e complessità moderata. È progettato per scopi di blog/contenuti, è reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript, solo HTML con le classi Tailwind. Utilizza picsum.photos per le immagini.
Componente visualizzatore a 360°
Un componente visualizzatore minimalista a 360° costruito con Tailwind CSS, con effetti reattivi e supporto per temi scuri.