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.
HTML Code
<div class="retro-vintage bg-gradient-to-br from-pastel-pink to-pastel-blue text-pastel-gray min-h-screen p-8 dark:from-pastel-gray dark:to-pastel-purple dark:text-pastel-pink">
<!-- Component Container -->
<div class="max-w-4xl mx-auto bg-white bg-opacity-30 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-50">
<!-- 360 Viewer Placeholder -->
<div class="relative w-full" style="padding-top: 75%;">
<!-- This is a placeholder for the 360 viewer. In a real application, a 360 viewer library/script would be initialized here. -->
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-pastel-light-gray dark:bg-pastel-dark-blue">
<p class="text-pastel-dark-gray text-xl font-bold dark:text-pastel-light-gray">360° Viewer Placeholder</p>
</div>
</div>
<!-- Product Info & Controls (placeholder) -->
<div class="p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-pastel-light-gray">Product Name</h2>
<p class="text-pastel-dark-gray mb-4 dark:text-pastel-light-gray">Product description goes here. This is a placeholder.</p>
<!-- Controls Placeholder -->
<div class="flex justify-center space-x-4">
<button class="px-4 py-2 bg-pastel-pink text-white rounded hover:bg-pastel-red transition duration-300 dark:bg-pastel-purple dark:hover:bg-pastel-pink">Rotate Left</button>
<button class="px-4 py-2 bg-pastel-blue text-white rounded hover:bg-pastel-dark-blue transition duration-300 dark:bg-pastel-pink dark:hover:bg-pastel-purple">Rotate Right</button>
</div>
</div>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse à 360° avec un design skeuomorphe, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Visionneuse 360
Un composant de visionneuse à 360° avec prise en charge du mode sombre et conception réactive, construit avec Tailwind CSS. Ne nécessite pas de JavaScript, utilisant uniquement CSS pour le style et la réactivité.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° de style rétro/vintage pour présenter le travail ou les produits d’un portfolio, conçu à l’aide de Tailwind CSS avec une interface complexe comportant plusieurs éléments interactifs et prenant en charge le mode sombre.