Visionneuse rétro à 360°
Composant de visionneuse rétro à 360 ° avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des images de substitution de picsum.photos.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg">
<div class="relative" style="padding-top: 56.25%;">
<img src="https://picsum.photos/600/400" alt="360 degree view" class="absolute top-0 left-0 w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-full text-sm font-bold">
Retro 360° Viewer
</div>
</div>
</div>
<div class="flex justify-center space-x-4 mt-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
< Previous
</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
Next >
</button>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un simple composant de visualisation à 360° stylisé en Material Design avec des tons de terre pour un contexte de commerce électronique. Il comprend un design réactif avec prise en charge du mode sombre, présentant des images de picsum.photos et des avatars de randomuser.me.
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.
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.