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 simple composant de visualisation à 360° stylisé en Material Design avec des tons de terre pour un contexte de commerce électronique. Il comprend un design réactif avec prise en charge du mode sombre, présentant des images de picsum.photos et des avatars de randomuser.me.
360_viewer_component
Un composant complexe de visualisation de produits à 360° avec une esthétique industrielle et brute utilisant une palette de couleurs violet/violet, adapté à un portefeuille. Comprend des éléments interactifs, un design réactif et la prise en charge du mode sombre.
Composant de la visionneuse Neumorphic 360
Un composant de visionneuse à 360° avec un design Neumorphism, une palette de couleurs triadique (exemple : bleu clair, rose, jaune-orange) et une complexité modérée pour les applications de médias sociaux. Le composant est réactif, prend en charge le mode sombre à l’aide des classes Tailwind et utilise picsum.photos pour les images et randomuser.me pour les avatars. Aucun JavaScript n’est requis.