Visionneuse simple à 360° (Glassmorphism, niveaux de gris)
Un composant de visionneuse 360 simple et réactif avec un design de glassmorphisme en niveaux de gris, adapté au commerce électronique. Prend en charge le mode sombre.
HTML Code
```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
<!-- 360 Viewer Area (Placeholder) -->
<div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
<!-- In a real implementation, a JavaScript library or iframe would go here -->
</div>
<!-- Product Info -->
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
<button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
</div>
</div>
</div>
</div>
```Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse 360° réactif conçu dans un style 3D avec prise en charge du thème sombre, à l’aide d’images fictives de picsum.photos.
Visionneuse rétro à 360°
Composant de visionneuse rétro à 360 ° avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des images de substitution de picsum.photos.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° simple et réactif conçu avec le style Glassmorphism et une palette de couleurs pastel pour la consommation de contenu de blog, y compris la prise en charge du mode sombre.