PastelBrutalist360AssetViewer
A simple, responsive 360° Asset Viewer component with a Brutalist design style and a pastel pink color scheme. Tailored for dashboards, it features a static image placeholder (simulating a 360° view), non-functional control buttons, and information display. Built with Tailwind CSS, it supports dark mode and showcases raw, bold aesthetics with thick borders and hard offset shadows.
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 -->Related Components
360° Viewer Component
A minimalist 360° viewer component designed with Tailwind CSS, featuring responsive effects and support for dark theme.
360° Viewer Component
A retro/vintage styled 360° viewer component for showcasing work or products in a portfolio, designed using Tailwind CSS with a complex interface featuring multiple interactive elements and supporting dark mode.
Simple 360 Viewer (Glassmorphism Grayscale)
A simple, responsive 360 viewer component with glassmorphism design in grayscale, suitable for e-commerce. Supports dark mode.