PastelBrutalist360AssetViewer
Un composant Asset Viewer 360° simple et réactif avec un style de design brutaliste et une palette de couleurs rose pastel. Conçu pour les tableaux de bord, il dispose d’un espace réservé à l’image statique (simulant une vue à 360°), de boutons de commande non fonctionnels et d’un affichage d’informations. Construit avec Tailwind CSS, il prend en charge le mode sombre et présente une esthétique brute et audacieuse avec des bordures épaisses et des ombres décalées dures.
HTML Code
<!-- Start of Pastel Brutalist 360 Asset Viewer Component -->
<div class="w-full max-w-lg bg-pink-100 dark:bg-slate-800 border-4 border-pink-500 dark:border-pink-600 p-4 sm:p-6 shadow-[8px_8px_0px_#ec4899] dark:shadow-[8px_8px_0px_#db2777] hover:shadow-[4px_4px_0px_#ec4899] dark:hover:shadow-[4px_4px_0px_#db2777] transition-all duration-200">
<!-- Header/Title -->
<div class="mb-4 pb-2 border-b-4 border-pink-500 dark:border-pink-600">
<h2 class="text-2xl sm:text-3xl font-bold text-pink-700 dark:text-pink-300 uppercase tracking-wider">
360° Asset View
</h2>
</div>
<!-- Image container -->
<div class="relative w-full aspect-video bg-pink-50 dark:bg-slate-700 border-2 border-pink-300 dark:border-pink-500 mb-4">
<img src="https://picsum.photos/seed/asset360viewer/800/450" alt="360 degree rotating view of an asset" class="w-full h-full object-cover"/>
<!-- Optional: Visual cue for interactivity -->
<div class="absolute inset-0 flex items-center justify-center opacity-30 hover:opacity-60 transition-opacity">
<svg class="w-16 h-16 text-pink-600 dark:text-pink-400" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</div>
</div>
<!-- Static "Controls" -->
<div class="flex flex-col sm:flex-row justify-around items-center space-y-3 sm:space-y-0 sm:space-x-3">
<button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
Left
</button>
<button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
Zoom
</button>
<button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
Right
</button>
</div>
<!-- Dashboard-like Info Footer -->
<div class="mt-6 pt-3 border-t-2 border-pink-300 dark:border-pink-500 text-sm text-pink-600 dark:text-pink-400">
<p>Asset ID: <span class="font-semibold">XYZ-789</span> | Status: <span class="font-semibold text-green-600 dark:text-green-400">Active</span></p>
<p class="mt-1">Hint: This is a static visual representation.</p>
</div>
</div>
<!-- End of Pastel Brutalist 360 Asset Viewer Component -->Composants associés
Composant Visionneuse à 360°
Un composant de visualisation à 360° minimaliste et réactif utilisant Tailwind CSS avec prise en charge du mode sombre.
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.
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.