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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
<div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
<img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
</div>
<div class="mt-6 flex justify-center space-x-4">
<button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
<button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
</div>
<div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
<h3 class="text-lg font-semibold text-white">Product Details:</h3>
<p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
</div>
<div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
<h3 class="text-lg font-semibold text-white">Team Members:</h3>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
</div>
</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 visionneuse à 360° de style brutalisme qui présente une image rotative dans un design brut et audacieux, avec 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° simple et réactif conçu pour le commerce électronique avec des micro-interactions attrayantes et une palette de couleurs triadique, prenant en charge le mode sombre.