Composant Visionneuse à 360°
Un composant simple de visualisation à 360° conçu avec un style brutaliste et des couleurs pastel, adapté aux interfaces de médias sociaux.
HTML Code
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
<div class="relative w-full max-w-md overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
<img src="https://picsum.photos/seed/picsum/800/400" alt="360 view" class="w-full h-auto transform transition-transform duration-500" />
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-lg text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 bg-opacity-75 px-4 py-2 rounded-lg shadow-md">Swipe to rotate</p>
</div>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-3">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Username</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted a new photo</p>
</div>
</div>
</div>Composants associés
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.
360DegreeViewerComposant
Un composant simple de visionneuse à 360 degrés avec un design brutaliste, des couleurs complémentaires et une prise en charge du mode sombre. Utilise uniquement HTML et Tailwind CSS.
Composant Visionneuse à 360°
Un composant de visionneuse réactif à 360° avec des micro-interactions pour les médias sociaux, avec des thèmes clairs et sombres utilisant des couleurs analogues et une complexité modérée.