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.
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
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.
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.
360_viewer_component
Un composant de visionneuse à 360° complexe et réactif avec une esthétique cyberpunk et des couleurs automnales, conçu pour les plateformes éducatives. Il prend en charge le mode sombre, des éléments interactifs et une typographie riche.