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
360_Viewer_Component_Retro_Rainbow_Simple_Ecommerce
Un composant de visionneuse à 360° simple et rétro pour le commerce électronique, avec un dégradé arc-en-ciel, un design réactif et une prise en charge du mode sombre. Conçu pour évoquer la nostalgie des années 80/90.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° simple conçu pour le commerce électronique, avec des micro-interactions et une palette de couleurs de tons de terre, avec prise en charge du mode sombre.
PastelBrutalist360AssetViewer
Un composant Asset Viewer 360° simple et réactif avec un style de design brutaliste et une palette de couleurs rose pastel. Conçu pour les tableaux de bord, il dispose d’un espace réservé à l’image statique (simulant une vue à 360°), de boutons de commande non fonctionnels et d’un affichage d’informations. Construit avec Tailwind CSS, il prend en charge le mode sombre et présente une esthétique brute et audacieuse avec des bordures épaisses et des ombres décalées dures.