Composant de visionneuse à 360 degrés
Composant de visionneuse à 360 degrés avec micro-interactions, schéma de couleurs triadique, complexité complexe, objectif de commerce électronique, conception réactive, prise en charge du thème sombre et CSS Tailwind.
HTML Code
<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-4">
<div class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="product-image w-full h-64 object-cover">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-300">
<button class="text-white text-2xl focus:outline-none">
<i class="fas fa-expand"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="text-xl 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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$199.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
<div class="flex justify-center py-2 bg-gray-200 dark:bg-gray-700">
<button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
<i class="fas fa-camera-rotate"></i>
</button>
<button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
<i class="fas fa-magnifying-glass-plus"></i>
</button>
<button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
<i class="fas fa-info-circle"></i>
</button>
</div>
</div>
</div>Composants associés
PastelBrutalist360AssetViewer
Un composant Asset Viewer 360° simple et réactif avec un style de design brutaliste et une palette de couleurs rose pastel. Conçu pour les tableaux de bord, il dispose d’un espace réservé à l’image statique (simulant une vue à 360°), de boutons de commande non fonctionnels et d’un affichage d’informations. Construit avec Tailwind CSS, il prend en charge le mode sombre et présente une esthétique brute et audacieuse avec des bordures épaisses et des ombres décalées dures.
360_Viewer_Component_Retro_Rainbow_Simple_Ecommerce
Un composant de visionneuse à 360° simple et rétro pour le commerce électronique, avec un dégradé arc-en-ciel, un design réactif et une prise en charge du mode sombre. Conçu pour évoquer la nostalgie des années 80/90.
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.