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.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<!-- Neumorphic Container -->
<div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">
<!-- 360 Viewer Placeholder (using an image for demonstration) -->
<!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
<div class="relative w-full h-64 rounded-lg overflow-hidden
shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
<img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
<!-- Example Triadic Colors for potential UI elements layered over the image -->
<div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
</div>
<!-- Component Title -->
<div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
Interactive 360° View
</div>
<!-- User Avatar and Info -->
<div class="flex items-center justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
<div class="ml-3 text-gray-600 dark:text-gray-400">
<p class="font-medium">John Doe</p>
<p class="text-sm">Exploring the view</p>
</div>
</div>
<!-- Interactive Buttons Placeholder -->
<div class="flex justify-around mt-6">
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</button>
</div>
</div>
</div>Composants associés
Composant Visionneuse 360
Un composant de visualisation à 360 degrés avec un design Glassmorphism, une palette de couleurs monochromatique et une complexité modérée. Il est conçu à des fins de blog/contenu, est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus, seulement du HTML avec des classes Tailwind. Utilise picsum.photos pour les images.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° simple conçu pour le commerce électronique, avec des micro-interactions et une palette de couleurs de tons de terre, avec prise en charge du mode sombre.
360_Viewer_Component_Watercolor_Corporate_Blues
Un composant complexe de visualisation à 360° avec un style de conception aquarelle/artistique et une palette de couleurs bleu d’entreprise, spécialement conçu pour les systèmes de réservation et les systèmes de réservation. Il comporte plusieurs éléments interactifs et est entièrement réactif avec la prise en charge du mode sombre.