Composant Visionneuse à 360°
Un composant de visionneuse à 360° utilisant le style de conception Glassmorphism avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="glass-morphism-container relative w-full max-w-2xl p-6 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 bg-opacity-70">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
<div class="viewer-wrapper relative">
<img src="https://picsum.photos/600/400?random=1" alt="360° View Image" class="object-cover w-full rounded-lg">
<div class="arrow-buttons absolute w-full flex justify-between top-1/2 transform -translate-y-1/2 px-4">
<button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
<
</button>
<button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
>
</button>
</div>
</div>
<div class="mt-4 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="mx-auto w-12 h-12 rounded-full border-2 border-white bg-white dark:border-gray-700">
<p class="text-gray-800 dark:text-gray-200 mt-2">User Name</p>
</div>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse réactif à 360° avec un design skeuomorphe, une palette de couleurs triadique et une prise en charge du thème sombre. Conçu pour la visualisation des données de tableau de bord et les panneaux de contrôle.
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 de la visionneuse Neumorphic 360
Un composant de visionneuse à 360° avec un design Neumorphism, une palette de couleurs triadique (exemple : bleu clair, rose, jaune-orange) et une complexité modérée pour les applications de médias sociaux. Le composant est réactif, prend en charge le mode sombre à l’aide des classes Tailwind et utilise picsum.photos pour les images et randomuser.me pour les avatars. Aucun JavaScript n’est requis.