PastelBrutalist360AssetViewer
Un componente de Asset Viewer de 360° simple y receptivo con un estilo de diseño brutalista y una combinación de colores rosa pastel. Diseñado para tableros, cuenta con un marcador de posición de imagen estática (que simula una vista de 360°), botones de control no funcionales y pantalla de información. Construido con Tailwind CSS, es compatible con el modo oscuro y muestra una estética cruda y audaz con bordes gruesos y sombras muy desplazadas.
Código HTML
<!-- 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 -->Componentes relacionados
Componente de visor de 360°
Un componente de visor de 360° con diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros. Diseñado para paneles de control, visualización de datos y paneles de control.
Componente de visor de 360°
Un componente de visor de 360 grados sensible diseñado para el comercio electrónico, con soporte para el modo oscuro. El estilo es retro/vintage con una combinación de colores pastel. Utiliza solo HTML y Tailwind CSS.
Componente de visor de 360°
Un componente de visor de 360° diseñado en un estilo brutalista, con alto contraste y diseños inusuales, que admite temas oscuros y efectos de diseño responsivos.