360° Viewer

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.

Open Preview

                <div class="flex flex-col items-center justify-center w-full h-screen bg-gray-100 dark:bg-gray-800 transition-all duration-300 p-5">
    <!-- Title -->
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">360° Product Viewer</h1>
    
    <!-- 360° Image Viewer -->
    <div class="relative w-full max-w-lg overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-900">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full transition-transform duration-500 ease-in-out transform hover:scale-105" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-lg">Hover to view</span>
        </div>
    </div>
    
    <!-- Product Details -->
    <div class="mt-5 text-center">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Stylish and Modern Product</h2>
        <p class="text-gray-600 dark:text-gray-400">This product is perfect for your day-to-day activities and brings a fresh touch to your style.</p>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$29.99</span>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>

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.

Open Preview

                <div class="retro-vintage bg-gradient-to-br from-pastel-pink to-pastel-blue text-pastel-gray min-h-screen p-8 dark:from-pastel-gray dark:to-pastel-purple dark:text-pastel-pink">

  <!-- Component Container -->
  <div class="max-w-4xl mx-auto bg-white bg-opacity-30 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-50">

    <!-- 360 Viewer Placeholder -->
    <div class="relative w-full" style="padding-top: 75%;">
      <!-- This is a placeholder for the 360 viewer. In a real application, a 360 viewer library/script would be initialized here. -->
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-pastel-light-gray dark:bg-pastel-dark-blue">
        <p class="text-pastel-dark-gray text-xl font-bold dark:text-pastel-light-gray">360° Viewer Placeholder</p>
      </div>
    </div>

    <!-- Product Info & Controls (placeholder) -->
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-pastel-light-gray">Product Name</h2>
      <p class="text-pastel-dark-gray mb-4 dark:text-pastel-light-gray">Product description goes here. This is a placeholder.</p>
      
      <!-- Controls Placeholder -->
      <div class="flex justify-center space-x-4">
        <button class="px-4 py-2 bg-pastel-pink text-white rounded hover:bg-pastel-red transition duration-300 dark:bg-pastel-purple dark:hover:bg-pastel-pink">Rotate Left</button>
        <button class="px-4 py-2 bg-pastel-blue text-white rounded hover:bg-pastel-dark-blue transition duration-300 dark:bg-pastel-pink dark:hover:bg-pastel-purple">Rotate Right</button>
      </div>
    </div>

  </div>

</div>

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 Preview

                <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>

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.

Open Preview

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

360° Viewer Component

A responsive 360° viewer component designed for dashboards with a 3D design style and support for dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">360° Viewer</h1>
    <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-850 p-4 rounded-lg shadow text-center">
                <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Explore Data</h2>
                <p class="text-gray-600 dark:text-gray-300">Interact with the 3D model to visualize data points.</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-3 gap-4 mt-8 w-full max-w-lg">
        <div class="bg-indigo-500 dark:bg-indigo-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 1</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-orange-500 dark:bg-orange-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 2</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-teal-500 dark:bg-teal-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 3</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
    </div>
    <div class="mt-8 flex items-center justify-center">
        <a href="#" class="bg-indigo-500 dark:bg-indigo-700 text-white py-2 px-4 rounded-lg shadow hover:bg-indigo-600 dark:hover:bg-indigo-800">Explore More</a>
    </div>
</div>

360° Viewer Component

A simple 360° viewer component designed with a brutalism style and pastel colors, suitable for social media interfaces.

Open Preview

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="relative w-full max-w-md overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/seed/picsum/800/400" alt="360 view" class="w-full h-auto transform transition-transform duration-500" />
        <div class="absolute inset-0 flex items-center justify-center">
            <p class="text-lg text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 bg-opacity-75 px-4 py-2 rounded-lg shadow-md">Swipe to rotate</p>
        </div>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="ml-3">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Username</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted a new photo</p>
        </div>
    </div>
</div>

360° Viewer Component

A simple 360° viewer component utilizing Glassmorphism style and responsive design with dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-300">Explore the item from all angles with our 360° viewer. Use your mouse or finger to rotate.</p>
        </div>
        <div class="flex justify-center">
            <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-auto rounded-b-lg">
        </div>
        <div class="flex items-center justify-around p-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        </div>
    </div>
</div>

360° Viewer Component

A simple responsive 360° viewer component designed with Glassmorphism style and a pastel color scheme for blog content consumption, including dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-50">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">360° Viewer</h2>
    <div class="relative w-full h-64 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/500/300?random=1" alt="360° image viewer" class="object-cover w-full h-full rounded-lg" />
        <div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg"> 
            <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">Interact with the image</span>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">User Profile</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" />
            <span class="ml-3 text-base text-gray-900 dark:text-gray-100">John Doe</span>
        </div>
    </div>
</div>

Simple 360 Viewer (Glassmorphism Grayscale)

A simple, responsive 360 viewer component with glassmorphism design in grayscale, suitable for e-commerce. Supports dark mode.

Open Preview

                ```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <!-- 360 Viewer Area (Placeholder) -->
    <div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
      <span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
      <!-- In a real implementation, a JavaScript library or iframe would go here -->
    </div>

    <!-- Product Info -->
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
      <div class="flex justify-between items-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
        <button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
      </div>
    </div>
  </div>
</div>
```

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 Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
    <div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
    </div>
    <div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Product Details:</h3>
        <p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
    </div>
    <div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Team Members:</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
        </div>
    </div>
</div>

Categories