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
Composant Visionneuse à 360°
Un composant de visionneuse à 360° simple et réactif conçu avec le style Glassmorphism et une palette de couleurs pastel pour la consommation de contenu de blog, y compris la prise en charge du mode sombre.
Composant Visionneuse 360
Un composant de visionneuse à 360° avec prise en charge du mode sombre et conception réactive, construit avec Tailwind CSS. Ne nécessite pas de JavaScript, utilisant uniquement CSS pour le style et la réactivité.
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.