Components 360° Viewer 360° Viewer Component

360° Viewer Component

A 360° viewer component designed in a brutalist style, featuring high contrast and unusual layouts, supporting dark theme and responsive design effects.

Preview

HTML Code

<div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-3xl font-bold mb-6">360° Viewer</h2>
    <p class="text-lg mb-4">Explore the 360° view of the object.</p>
    <div class="w-full h-64 border-4 border-white overflow-hidden rounded-lg flex items-center justify-center">
        <img src="https://picsum.photos/600/400?random=1" alt="360 View" class="transform duration-500 hover:scale-105"/>
    </div>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
    </div>
</div>

Related Components

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.

Open

Neumorphic 360 Viewer Component

A 360° Viewer Component with Neumorphism design, Triadic color scheme (example: light blue, pink, yellow-orange) and moderate complexity for social media applications. The component is responsive, supports dark mode using Tailwind classes, and uses picsum.photos for images and randomuser.me for avatars. No JavaScript is required.

Open

360° Viewer Component

A minimalist 360° viewer component built with Tailwind CSS, featuring responsive effects and dark theme support.

Open