Composants Visionneuse à 360° Composant Visionneuse à 360°

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.

Aperçu

HTML Code

<div class="max-w-xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-300 mb-4">Product 360° Viewer</h2>
    <div class="relative w-full h-72 overflow-hidden rounded-lg shadow-lg border border-brown-200 dark:border-brown-700">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="object-cover h-full w-full transition-transform duration-300 ease-in-out hover:scale-105">
        <div class="absolute inset-0 flex items-center justify-center">
            <button class="bg-brown-600 text-white font-semibold rounded-full px-4 py-2 transition-transform duration-300 ease-in-out transform hover:scale-110 dark:bg-brown-700">Rotate</button>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-xl font-semibold text-brown-700 dark:text-brown-200">Product Name</h3>
        <p class="text-brown-600 dark:text-brown-400">This is a brief description of the product. It is made from high-quality materials and is perfect for your needs.</p>
        <div class="flex items-center mt-2">
            <span class="text-lg font-bold text-brown-800 dark:text-brown-300">$49.99</span>
        </div>
    </div>
</div>

Composants associés

360_Viewer_Component

Il s’agit d’un composant complexe de visualisation de produits à 360° conçu pour les plateformes de divertissement/médias, avec une utilisation intensive de dégradés de couleurs et de transitions fluides dans une palette de couleurs neutres et chaudes. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir