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.
HTML Code
<div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
<!-- Brutalist Border -->
<div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>
<div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900
border-4 border-stone-950 dark:border-amber-50
shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
<h1 class="text-4xl md:text-5xl lg:text-6xl
font-extrabold mb-6
uppercase
border-b-4 border-amber-50 dark:border-stone-900
pb-2">
360° Viewer
</h1>
<div class="relative w-full aspect-video
bg-stone-950 dark:bg-amber-50
border-4 border-stone-950 dark:border-amber-50
overflow-hidden
mb-6">
<!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
<img src="https://picsum.photos/seed/360view/800/450"
alt="360 degree view placeholder"
class="w-full h-full object-cover opacity-70">
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
Content Placeholder
</p>
</div>
</div>
<p class="text-lg md:text-xl leading-relaxed mb-6">
Explore this object from every angle.
This brutalist design emphasizes raw functionality and stark contrasts.
A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg"
alt="Author Avatar"
class="w-12 h-12 md:w-16 md:h-16 rounded-full
border-4 border-stone-950 dark:border-amber-50
shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
<span class="text-xl font-bold">J. Doe</span>
</div>
<a href="#" class="inline-block px-6 py-3
bg-stone-950 dark:bg-amber-50
text-amber-50 dark:text-stone-900
uppercase font-bold
border-4 border-stone-950 dark:border-amber-50
shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
Learn More
</a>
</div>
</div>
</div>Composants associés
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 Visionneuse à 360°
Un composant de visualisation à 360° conçu dans un style brutaliste, avec un contraste élevé et des mises en page inhabituelles, prenant en charge les thèmes sombres et les effets de design réactifs.
Composant Visionneuse à 360°
Un composant simple de visualisation à 360° conçu dans un style brutaliste à des fins de commerce électronique, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.