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.
HTML Code
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-50">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">360° Viewer</h2>
<div class="relative w-full h-64 rounded-lg overflow-hidden">
<img src="https://picsum.photos/500/300?random=1" alt="360° image viewer" class="object-cover w-full h-full rounded-lg" />
<div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg">
<span class="text-lg font-semibold text-gray-900 dark:text-gray-100">Interact with the image</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">User Profile</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" />
<span class="ml-3 text-base text-gray-900 dark:text-gray-100">John Doe</span>
</div>
</div>
</div>Composants associés
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é.
Glassmorphism 360 Viewer Component
Glassmorphism 360° Viewer Component pour un tableau de bord avec une palette de couleurs triadique, une complexité simple, un design réactif et une prise en charge du thème sombre.
Composant Visionneuse à 360°
Un composant de visualisation à 360° avec le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le design réactif et le thème sombre.