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.
HTML Code
<div class="flex flex-col items-center justify-center p-5 bg-gray-900 text-white dark:bg-gray-800">
<h2 class="text-3xl font-bold mb-4">360° Product Viewer</h2>
<div class="flex items-center justify-center space-x-5 mb-4">
<img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="border-4 border-red-600 dark:border-blue-400 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
<img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="border-4 border-yellow-400 dark:border-green-500 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
<img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="border-4 border-blue-500 dark:border-red-600 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
</div>
<p class="text-center mb-5">Rotate through the product images to see more details.</p>
<div class="flex space-x-3">
<button class="bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-red-700 dark:hover:bg-red-500 transition duration-200">Previous</button>
<button class="bg-yellow-400 text-gray-900 font-bold py-2 px-4 rounded-lg shadow-md hover:bg-yellow-500 dark:bg-green-600 dark:text-white dark:hover:bg-green-500 transition duration-200">Next</button>
</div>
<div class="mt-5">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-400 dark:border-green-500" />
<p class="mt-2 text-center font-medium">Customer Review</p>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse à 360° conçu avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris. Il dispose d’une interface de complexité moyenne adaptée aux applications de médias sociaux, prenant en charge les thèmes clairs et sombres.
Composant Visionneuse à 360°
Un composant de visualisation simple à 360° utilisant le style Glassmorphism et un design réactif avec prise en charge du mode sombre.
360_viewer_component
Un composant complexe de visualisation de produits à 360° avec des micro-interactions, une palette de couleurs violet/violet et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.