Composant Visionneuse 360
Un composant de visualisation à 360 degrés avec un design Glassmorphism, une palette de couleurs monochromatique et une complexité modérée. Il est conçu à des fins de blog/contenu, est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus, seulement du HTML avec des classes Tailwind. Utilise picsum.photos pour les images.
HTML Code
<div class="dark:bg-gray-900 bg-gray-100 flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-6 w-full max-w-md border border-gray-200 dark:border-gray-700">
<div class="text-center mb-6">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">360° Product Viewer</h2>
<p class="text-gray-600 dark:text-gray-300">Experience the product from every angle.</p>
</div>
<div class="relative mb-6 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 aspect-video">
<!-- Placeholder for 360 viewer - In a real scenario, this would be a series of images or a specialized viewer library -->
<img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100" id="viewer-image">
<img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
<img src="https://picsum.photos/600/400?random=3" alt="Product View 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
</div>
<div class="flex justify-center space-x-2 mb-6">
<button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
</button>
<button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<div class="text-center text-gray-700 dark:text-gray-300 text-sm">
<p>Drag or use arrows to rotate view (interactive features would require JavaScript).</p>
</div>
</div>
</div>
Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse réactif à 360° avec des micro-interactions pour les médias sociaux, avec des thèmes clairs et sombres utilisant des couleurs analogues et une complexité modérée.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° de style brutalisme qui présente une image rotative dans un design brut et audacieux, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Visionneuse à 360°
Un composant de visionneuse 360° réactif conçu pour les tableaux de bord avec un style de conception 3D et la prise en charge du mode sombre.