360° Viewer Component
A 360° viewer component with responsive design and dark theme support using Tailwind CSS. Uses CSS for animations and interactions for a microinteraction feel. No JavaScript.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="relative w-64 h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
<div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
<div class="text-white text-xl font-bold">View 360</div>
</div>
</div>
</div>Related Components
360° Viewer Component
A simple and responsive 360° Viewer Component designed for e-commerce with engaging microinteractions and a triadic color scheme, supporting dark mode.
360° Viewer Component
A simple 360° viewer component styled in Material Design with Earth tones for an e-commerce context. It includes a responsive design with support for dark mode, showcasing images from picsum.photos and avatars from randomuser.me.
360° Viewer Component
A minimalist 360° viewer component built with Tailwind CSS, featuring responsive effects and dark theme support.