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.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<!-- Neumorphic Container -->
<div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">
<!-- 360 Viewer Placeholder (using an image for demonstration) -->
<!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
<div class="relative w-full h-64 rounded-lg overflow-hidden
shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
<img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
<!-- Example Triadic Colors for potential UI elements layered over the image -->
<div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
</div>
<!-- Component Title -->
<div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
Interactive 360° View
</div>
<!-- User Avatar and Info -->
<div class="flex items-center justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
<div class="ml-3 text-gray-600 dark:text-gray-400">
<p class="font-medium">John Doe</p>
<p class="text-sm">Exploring the view</p>
</div>
</div>
<!-- Interactive Buttons Placeholder -->
<div class="flex justify-around mt-6">
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</button>
</div>
</div>
</div>Related Components
360° Viewer Component
A responsive 360 degree viewer component designed for e-commerce, with support for dark mode. The styling is retro/vintage with a pastel color scheme. Uses only HTML and Tailwind CSS.
360_viewer_component
A complex, vibrant, skeuomorphic 360-degree product viewer component for fashion/beauty, fully responsive with dark mode support.
360_viewer_component_sports_grayscale
A simple, responsive 360° viewer component for sports/fitness applications, featuring a watercolor/artistic style with a grayscale color scheme and dark mode support.