Glassmorphism 360 Viewer Component
Glassmorphism 360° Viewer Component pour un tableau de bord avec une palette de couleurs triadique, une complexité simple, un design réactif et une prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse à 360° inspiré du Material Design avec des couleurs vives pour présenter le travail ou les produits, avec un design réactif et une prise en charge du mode sombre.
Composant de la visionneuse Neumorphic 360
Un composant de visionneuse à 360° avec un design Neumorphism, une palette de couleurs triadique (exemple : bleu clair, rose, jaune-orange) et une complexité modérée pour les applications de médias sociaux. Le composant est réactif, prend en charge le mode sombre à l’aide des classes Tailwind et utilise picsum.photos pour les images et randomuser.me pour les avatars. Aucun JavaScript n’est requis.
Composant Visionneuse à 360°
Un composant simple de visualisation à 360° conçu dans un style brutaliste à des fins de commerce électronique, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.