Composants Visionneuse à 360° Visionneuse simple à 360° (Glassmorphism, niveaux de gris)

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.

Aperçu

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 réactif à 360 degrés conçu pour le commerce électronique, avec prise en charge du mode sombre. Le style est rétro/vintage avec une palette de couleurs pastel. Utilise uniquement HTML et Tailwind CSS.

Ouvrir

Composant Visionneuse 360

Composant de visualisation à 360 degrés avec prise en charge du mode sombre.

Ouvrir

Composant Visionneuse à 360°

Un composant de visualisation à 360° conçu avec des micro-interactions, avec des effets réactifs et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.

Ouvrir