360_viewer_industrial_finance
Un composant de visionneuse à 360° simple et réactif avec une esthétique industrielle et brute et une palette de couleurs arc-en-ciel dégradée, conçu pour les interfaces financières et bancaires. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform
bg-gradient-to-br from-red-400 via-yellow-400 to-green-400
dark:from-red-700 dark:via-purple-700 dark:to-blue-700
p-0.5">
<div class="bg-zinc-800 dark:bg-zinc-950 rounded-xl p-6 sm:p-8 lg:p-10 border-t border-b border-zinc-700 dark:border-zinc-800">
<div class="flex flex-col md:flex-row items-center gap-6 sm:gap-8 lg:gap-10">
<!-- Left Section: 360 Viewer Placeholder -->
<div class="w-full md:w-2/3 relative aspect-video bg-zinc-700 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-600 dark:border-zinc-700 shadow-inner flex items-center justify-center">
<img src="https://picsum.photos/800/450?random=1" alt="360-degree financial product view" class="absolute inset-0 w-full h-full object-cover opacity-70 filter grayscale brightness-75">
<div class="absolute inset-0 bg-gradient-to-br from-red-500/30 via-yellow-500/30 to-green-500/30 dark:from-red-800/30 dark:via-purple-800/30 dark:to-blue-800/30 mix-blend-multiply"></div>
<div class="relative z-10 text-white text-center flex flex-col items-center justify-center p-4">
<svg class="w-12 h-12 sm:w-16 sm:h-16 text-zinc-300 dark:text-zinc-500 mb-2 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-lg sm:text-xl font-bold text-zinc-200 dark:text-zinc-400 drop-shadow-md">360° Product View</p>
<p class="text-sm sm:text-base text-zinc-400 dark:text-zinc-600 mt-1">Drag to explore</p>
</div>
<div class="absolute bottom-3 right-3 flex space-x-2">
<button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
</button>
<button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</div>
</div>
<!-- Right Section: Product Details -->
<div class="w-full md:w-1/3 flex flex-col justify-between text-zinc-300 dark:text-zinc-400">
<div>
<h2 class="text-xl sm:text-2xl lg:text-3xl font-extrabold mb-2 uppercase tracking-wide text-transparent bg-clip-text
bg-gradient-to-r from-red-400 via-yellow-400 to-green-400
dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
drop-shadow-lg">
Investment Portfolio
</h2>
<p class="text-sm sm:text-base mb-4 text-zinc-400 dark:text-zinc-500 leading-relaxed">
Explore the intricate details of your diversified financial assets.
This interactive view provides a dynamic perspective.
</p>
</div>
<div class="space-y-3 mt-4 text-sm sm:text-base font-mono">
<p class="flex justify-between items-center">
<span class="font-semibold text-zinc-200 dark:text-zinc-300">Current Value:</span>
<span class="text-green-400 dark:text-lime-400 font-bold tracking-wider">$1,234,567.89</span>
</p>
<p class="flex justify-between items-center">
<span class="font-semibold text-zinc-200 dark:text-zinc-300">Daily Change:</span>
<span class="text-emerald-400 dark:text-teal-400">+1.23%</span>
</p>
<p class="flex justify-between items-center">
<span class="font-semibold text-zinc-200 dark:text-zinc-300">Growth Rate (YTD):</span>
<span class="text-blue-400 dark:text-sky-400">+18.75%</span>
</p>
</div>
<button class="mt-6 w-full py-3 px-4 rounded-lg font-bold uppercase tracking-wider shadow-lg transform active:scale-95 transition-transform duration-200
text-zinc-900 dark:text-white
bg-gradient-to-r from-cyan-400 via-lightBlue-500 to-indigo-600
hover:from-cyan-500 hover:via-lightBlue-600 hover:to-indigo-700
dark:from-purple-500 dark:via-pink-500 dark:to-orange-500
dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-orange-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400 dark:focus:ring-pink-400
border border-zinc-700 dark:border-zinc-800">
View Full Report
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Visionneuse 360
Un composant de visionneuse à 360° avec un design Neumorphic, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comporte un conteneur avec des ombres subtiles et des coins arrondis, un espace réservé à l’image et des flèches de navigation stylisées avec l’effet neumorphique.
360_viewer_component
Un composant complexe, dynamique et skeuomorphe de visualisation de produits à 360 degrés pour la mode/beauté, entièrement réactif avec prise en charge du mode sombre.
360_Viewer_Component
Il s’agit d’un composant complexe de visualisation de produits à 360° conçu pour les plateformes de divertissement/médias, avec une utilisation intensive de dégradés de couleurs et de transitions fluides dans une palette de couleurs neutres et chaudes. Il est entièrement réactif et prend en charge le mode sombre.