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
Visionneuse simple à 360° (Glassmorphism, niveaux de gris)
Un composant de visionneuse 360 simple et réactif avec un design de glassmorphisme en niveaux de gris, adapté au commerce électronique. Prend en charge le mode sombre.
Composant Visionneuse à 360°
Un composant de visualisation à 360° avec le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le design réactif et le thème sombre.
360_viewer_industrial_finance
Un composant de visionneuse à 360° simple et réactif avec une esthétique industrielle et brute et une palette de couleurs arc-en-ciel dégradée, conçu pour les interfaces financières et bancaires. Inclut la prise en charge du mode sombre.