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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
<h1 class="text-4xl font-bold mb-4">360° Viewer</h1>
<div class="relative w-full max-w-3xl h-96 bg-gray-800 border-4 border-white rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/800/600" alt="360° view" class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-700 ease-in-out hover:rotate-12 hover:scale-105"/>
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">
<h2 class="text-2xl font-semibold">View from all angles</h2>
<p class="text-sm">Hover to rotate the view</p>
</div>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white" />
<p class="mt-2">Created by: John Doe</p>
</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 visionneuse à 360° avec un design Neumorphic, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comporte un conteneur avec des ombres subtiles et des coins arrondis, un espace réservé à l’image et des flèches de navigation stylisées avec l’effet neumorphique.
360_Viewer_Component
Un composant de visualisation complexe à 360° avec un design de glassmorphism, une palette de couleurs en niveaux de gris et des éléments interactifs, adapté aux plateformes éducatives. Comprend une réactivité complète et la prise en charge du mode sombre.