Composant Visionneuse à 360°
Un composant de visionneuse à 360° inspiré du Material Design avec des couleurs vives pour présenter le travail ou les produits, avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
<!-- 360 Viewer Wrapper -->
<div class="aspect-w-16 aspect-h-9">
<img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
</div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
</div>
</div>
</div>
<div class="mt-4 text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
</div>
<div class="flex justify-center mt-4 space-x-4">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
<button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse à 360° simple et réactif conçu pour le commerce électronique avec des micro-interactions attrayantes et une palette de couleurs triadique, prenant en charge le mode sombre.
Composant Visionneuse à 360°
Un composant simple de visualisation à 360° conçu dans un style brutaliste à des fins de commerce électronique, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.
Composant Visionneuse à 360°
Un composant de visualisation à 360° avec le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le design réactif et le thème sombre.