Search Components

360° Viewer

Interactive viewer for 360-degree images or videos

360_viewer_component

A responsive 360° viewer component designed forCRM/Business tools with a dark mode UI and a neon/electric color scheme.

                <div class="min-h-screen bg-gray-950 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
  <div class="w-full max-w-6xl bg-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-800 dark:bg-gray-900 dark:border-gray-800">
    <div class="p-6 sm:p-8 lg:p-10">
      <div class="flex flex-col md:flex-row items-start justify-between mb-8">
        <div class="mb-6 md:mb-0">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-2">
            <span class="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 text-transparent bg-clip-text">Product </span>
            <span class="bg-gradient-to-r from-blue-400 to-cyan-400 text-transparent bg-clip-text">Overview</span>
          </h2>
          <p class="text-gray-400 text-md sm:text-lg lg:text-xl">Explore every angle of our cutting-edge solution.</p>
        </div>
        <div class="flex flex-wrap gap-3">
          <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-500 shadow-lg shadow-purple-900/50 hover:from-purple-700 hover:to-pink-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
            <svg class="inline-block w-4 h-4 mr-2 -ml-1 text-white" 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 10l4.552-3.282A1 1 0 0121 7.618v8.764a1 1 0 01-1.448.894L15 14m-5 4v-4a4 4 0 014-4h2a4 4 0 014 4v4a4 4 0 01-4 4h-2a4 4 0 01-4-4z"></path></svg>
            View Demo
          </button>
          <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-cyan-500 shadow-lg shadow-blue-900/50 hover:from-blue-700 hover:to-cyan-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900">
            <svg class="inline-block w-4 h-4 mr-2 -ml-1 text-white" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download Specs
          </button>
        </div>
      </div>

      <div class="relative aspect-video w-full rounded-lg overflow-hidden border-2 border-gray-700 shadow-xl shadow-gray-900/50 mb-8">
        <!-- Placeholder for 360 viewer. In a real application, this would be a JS-powered viewer. -->
        <img src="https://picsum.photos/1200/675?random=1" alt="360 Product View Placeholder" class="w-full h-full object-cover object-center animate-pulse-glow border-2 border-indigo-500/50 rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-60 backdrop-blur-sm text-white text-lg font-bold p-4 text-center rounded-lg border border-indigo-600/70">
          <p class="bg-gradient-to-r from-lime-400 to-green-400 text-transparent bg-clip-text text-xl sm:text-2xl lg:text-3xl font-extrabold">360° Interactive Viewer Coming Soon!</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-cyan-400 mr-3 animate-ping-slow"></span>
            Key Feature 1
          </h3>
          <p class="text-gray-400 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-purple-400 mr-3 animate-ping-slow"></span>
            Key Feature 2
          </h3>
          <p class="text-gray-400 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-pink-400 mr-3 animate-ping-slow"></span>
            Key Feature 3
          </h3>
          <p class="text-gray-400 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>

      <div class="text-center">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-gray-900 bg-gradient-to-r from-lime-400 to-green-400 hover:from-lime-500 hover:to-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-5 w-5 text-gray-900" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7 4a1 1 0 011 1v4a1 1 0 01-2 0V5a1 1 0 011-1zm6 0a1 1 0 011 1v4a1 1 0 01-2 0V5a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          Get a Free Consultation
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes ping-slow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
  }
  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.3); border-color: rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.8), 0 0 25px rgba(99, 102, 241, 0.5); border-color: rgba(99, 102, 241, 0.8); }
  }
  .animate-pulse-glow {
    animation: pulse-glow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

360_viewer_industrial_finance

A simple, responsive 360° viewer component with an industrial, raw aesthetic and a gradient rainbow color scheme, designed for finance and banking interfaces. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform
              bg-gradient-to-br from-red-400 via-yellow-400 to-green-400
              dark:from-red-700 dark:via-purple-700 dark:to-blue-700
              p-0.5">
    <div class="bg-zinc-800 dark:bg-zinc-950 rounded-xl p-6 sm:p-8 lg:p-10 border-t border-b border-zinc-700 dark:border-zinc-800">
      <div class="flex flex-col md:flex-row items-center gap-6 sm:gap-8 lg:gap-10">
        <!-- Left Section: 360 Viewer Placeholder -->
        <div class="w-full md:w-2/3 relative aspect-video bg-zinc-700 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-600 dark:border-zinc-700 shadow-inner flex items-center justify-center">
          <img src="https://picsum.photos/800/450?random=1" alt="360-degree financial product view" class="absolute inset-0 w-full h-full object-cover opacity-70 filter grayscale brightness-75">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500/30 via-yellow-500/30 to-green-500/30 dark:from-red-800/30 dark:via-purple-800/30 dark:to-blue-800/30 mix-blend-multiply"></div>
          <div class="relative z-10 text-white text-center flex flex-col items-center justify-center p-4">
            <svg class="w-12 h-12 sm:w-16 sm:h-16 text-zinc-300 dark:text-zinc-500 mb-2 animate-pulse" 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="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="text-lg sm:text-xl font-bold text-zinc-200 dark:text-zinc-400 drop-shadow-md">360° Product View</p>
            <p class="text-sm sm:text-base text-zinc-400 dark:text-zinc-600 mt-1">Drag to explore</p>
          </div>
          <div class="absolute bottom-3 right-3 flex space-x-2">
            <button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
              <svg class="w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
            </button>
            <button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
              <svg class="w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Right Section: Product Details -->
        <div class="w-full md:w-1/3 flex flex-col justify-between text-zinc-300 dark:text-zinc-400">
          <div>
            <h2 class="text-xl sm:text-2xl lg:text-3xl font-extrabold mb-2 uppercase tracking-wide text-transparent bg-clip-text
                       bg-gradient-to-r from-red-400 via-yellow-400 to-green-400
                       dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                       drop-shadow-lg">
              Investment Portfolio
            </h2>
            <p class="text-sm sm:text-base mb-4 text-zinc-400 dark:text-zinc-500 leading-relaxed">
              Explore the intricate details of your diversified financial assets.
              This interactive view provides a dynamic perspective.
            </p>
          </div>

          <div class="space-y-3 mt-4 text-sm sm:text-base font-mono">
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Current Value:</span>
              <span class="text-green-400 dark:text-lime-400 font-bold tracking-wider">$1,234,567.89</span>
            </p>
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Daily Change:</span>
              <span class="text-emerald-400 dark:text-teal-400">+1.23%</span>
            </p>
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Growth Rate (YTD):</span>
              <span class="text-blue-400 dark:text-sky-400">+18.75%</span>
            </p>
          </div>

          <button class="mt-6 w-full py-3 px-4 rounded-lg font-bold uppercase tracking-wider shadow-lg transform active:scale-95 transition-transform duration-200
                         text-zinc-900 dark:text-white
                         bg-gradient-to-r from-cyan-400 via-lightBlue-500 to-indigo-600
                         hover:from-cyan-500 hover:via-lightBlue-600 hover:to-indigo-700
                         dark:from-purple-500 dark:via-pink-500 dark:to-orange-500
                         dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-orange-600
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400 dark:focus:ring-pink-400
                         border border-zinc-700 dark:border-zinc-800">
            View Full Report
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

360_Viewer_Component_Watercolor_Corporate_Blues

A complex 360° viewer component with a watercolor/artistic design style and corporate blue color scheme, specifically tailored for booking and reservation systems. It features multiple interactive elements and is fully responsive with dark mode support.

Open Preview

                <div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 dark:from-gray-900 dark:to-gray-800 font-sans">

  <!-- Top Header Section (For Booking/Reservation context) -->
  <div class="max-w-7xl mx-auto mb-6 p-4 bg-white/70 backdrop-blur-sm rounded-lg shadow-xl dark:bg-gray-800/70 border border-blue-200 dark:border-gray-700">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2 md:mb-0">Explore Our Space in 360°</h1>
      <div class="flex items-center space-x-4">
        <div class="relative group">
          <button class="px-6 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105">
            Book Now
          </button>
          <div class="absolute hidden group-hover:block whitespace-nowrap bg-blue-700 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 origin-bottom scale-0 group-hover:scale-100 transition-transform duration-200 ease-out">
            Start Your Reservation
          </div>
        </div>
        <button class="p-2 text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-100 rounded-full hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-300 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          <span class="sr-only">Add to Calendar</span>
        </button>
      </div>
    </div>
  </div>

  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Left Panel: 360 Viewer Placeholder -->
    <div class="lg:col-span-2 relative aspect-video bg-white/80 dark:bg-gray-800/80 rounded-xl shadow-xl overflow-hidden border border-blue-200 dark:border-gray-700 group">
      <img class="w-full h-full object-cover" src="https://picsum.photos/1200/800?random=1" alt="360 Degree View Placeholder">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100/50 via-blue-200/50 to-indigo-200/50 dark:from-gray-700/50 dark:via-gray-800/50 dark:to-gray-900/50 opacity-90"></div>

      <!-- Artistic Overlay -->
      <div class="absolute inset-0 pointer-events-none opacity-50 dark:opacity-30" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\' preserveAspectRatio=\'none\'><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'none\'/><path d=\'M0,50 C25,25 75,75 100,50 L100,0 L0,0 Z\' fill=\'%23add8e6\'/><path d=\'M0,50 C25,75 75,25 100,50 L100,100 L0,100 Z\' fill=\'%2387cefa\'/></svg>'); background-size: 100% 100%;"></div>

      <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
        <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-blue-900 dark:text-blue-100 drop-shadow-lg text-center leading-snug tracking-tight mb-4 group-hover:scale-105 transition duration-300 ease-out">
          Immersive 360° Tour
        </h2>
        <p class="text-xl md:text-2xl text-blue-800 dark:text-blue-200 text-center max-w-lg mb-8 drop-shadow-md group-hover:translate-y-1 transition duration-300 ease-out">
          Click to activate the interactive experience.
        </p>
        <button class="relative px-8 py-3 bg-blue-700 text-white text-lg font-semibold rounded-full shadow-2xl hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            Launch 360° Viewer
          </span>
        </button>
      </div>
    </div>

    <!-- Right Panel: Controls & Information -->
    <div class="flex flex-col space-y-6">

      <!-- Hotspot Navigation -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Navigate Hotspots</h3>
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Lobby
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Conference Room
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Office Desk Area
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Breakroom
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Reception
          </button>
        </div>
      </div>

      <!-- Interactive Controls -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Viewer Controls</h3>
        <div class="grid grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
            </svg>
            Zoom In
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
            </svg>
            Zoom Out
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5-5" />
            </svg>
            Full Screen
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Reset View
          </button>
        </div>
      </div>

      <!-- Additional Info/Testimonial -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">What Our Clients Say</h3>
        <div class="flex items-start">
          <img class="w-16 h-16 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
          <div>
            <p class="text-blue-900 dark:text-blue-100 italic mb-2">"The 360° tour was incredibly helpful in visualizing the space before my booking. Highly recommend!"</p>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">Jane Doe, satisfied client</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

360_viewer_marketplace_component

A responsive 360° viewer component for marketplaces, featuring a watercolor/artistic design style with a black and white color scheme and a single bright accent color. Includes interactive elements, dark mode support, and uses semantic HTML.

Open Preview

                <div class="font-sans antialiased bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="flex flex-col lg:flex-row max-w-7xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] border border-gray-100 dark:border-gray-700">

    <!-- Image Viewer Section -->
    <div class="lg:w-3/5 p-4 sm:p-6 relative overflow-hidden flex flex-col items-center justify-center bg-gradient-to-br from-purple-50 dark:from-gray-700 to-white dark:to-gray-800 group">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/white-prism.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] opacity-10 rounded-3xl"></div>

      <div class="relative w-full aspect-video md:aspect-[16/10] lg:aspect-[16/9] max-w-xl group-hover:scale-[1.02] transform transition-transform duration-500 ease-out">
        <img src="https://picsum.photos/id/401/800/600" alt="Product 360 View" class="w-full h-full object-contain rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 animate-fade-in" loading="lazy">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="flex items-center justify-center p-3 rounded-full bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm text-gray-800 dark:text-gray-200 shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-accent-400/50 dark:focus:ring-accent-600/50" aria-label="Rotate 360 degrees">
            <svg class="w-8 h-8 md:w-10 md:h-10 text-rose-500 dark:text-rose-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="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 13V4m7 14.054V21.5M10 19.5h2M12 2.5v16.054m-2 0H14m1.966-2.502L18 16.5m-3-12l3-2.5m-5.466 2.502L6 16.5m3-12L6 4.5m10 8l-2 2h-4c-1.105 0-2 .895-2 2v-.5c0-1.657 1.343-3 3-3h3a2 2 0 110 4h-3a2 2 0 100 4h3a2 2 0 100 4h-3a2 2 0 100 4H10c-1.105 0-2 .895-2 2z"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="flex justify-center mt-4 space-x-1 sm:mt-6">
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-rose-500 dark:border-rose-400 rounded-lg overflow-hidden shadow-md transform scale-110 ring-2 ring-rose-300 dark:ring-rose-600 relative after:content-[''] after:absolute after:inset-0 after:opacity-20 after:bg-rose-500 dark:after:bg-rose-400" aria-label="View 1">
          <img src="https://picsum.photos/id/401/100/75" alt="Thumbnail 1" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 2">
          <img src="https://picsum.photos/id/402/100/75" alt="Thumbnail 2" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 3">
          <img src="https://picsum.photos/id/403/100/75" alt="Thumbnail 3" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="hidden sm:inline-block w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 4">
          <img src="https://picsum.photos/id/404/100/75" alt="Thumbnail 4" class="w-full h-full object-cover" loading="lazy">
        </button>
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="lg:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between relative bg-white dark:bg-gray-800">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grunge-wall.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-geometric-pattern.png')] opacity-5 rounded-3xl"></div>
      <div class="relative z-10">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight text-gray-900 dark:text-gray-50 animate-fade-down">
          Artisanal Ceramic Vase
        </h1>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-6 font-medium animate-fade-down animation-delay-200">
          Hand-painted masterpiece for your home.
        </p>

        <div class="flex items-baseline mb-6 space-x-3">
          <span class="text-4xl sm:text-5xl font-bold text-rose-600 dark:text-rose-400 animate-fade-in animation-delay-400">$89.99</span>
          <span class="text-xl sm:text-2xl text-gray-400 dark:text-gray-500 line-through animate-fade-in animation-delay-500">$120.00</span>
          <span class="text-base text-green-600 dark:text-green-400 font-semibold animate-fade-in animation-delay-600">(25% OFF)</span>
        </div>

        <p class="text-sm sm:text-base text-gray-700 dark:text-gray-200 mb-6 leading-relaxed">
          Each vase is uniquely crafted by local artisans, featuring intricate watercolor-inspired patterns and a smooth, matte finish. Perfect for adding a touch of elegance to any room. Limited edition. Measures 10" high, 6" diameter.
        </p>

        <div class="mb-6 flex flex-wrap gap-3">
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Handmade</span>
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Unique Piece</span>
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Home Decor</span>
        </div>

        <div class="mb-6 flex flex-col sm:flex-row gap-4">
          <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-rose-600 dark:bg-rose-500 text-white font-semibold rounded-xl shadow-lg hover:bg-rose-700 dark:hover:bg-rose-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 animate-fade-up animation-delay-700">
            Add to Cart
          </button>
          <button class="flex-1 w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 font-semibold rounded-xl shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 animate-fade-up animation-delay-800">
            <svg class="w-5 h-5 inline-block mr-2 -mt-0.5" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
            </svg>
            Wishlist
          </button>
        </div>

        <div class="mt-8 flex items-center justify-between text-gray-600 dark:text-gray-300 text-sm">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Vendor Avatar" class="w-10 h-10 rounded-full border-2 border-rose-300 dark:border-rose-600 shadow-md" loading="lazy">
            <div>
              <p class="font-medium text-gray-800 dark:text-gray-100">Sold by <a href="#" class="text-rose-600 dark:text-rose-400 hover:underline">Artisan Crafts Co.</a></p>
              <p class="text-xs">Est. 2018 | 4.9 <span class="text-yellow-500">★</span></p>
            </div>
          </div>
          <div>
            <a href="#" class="flex items-center text-rose-600 dark:text-rose-400 hover:underline text-sm">
              View Store 
              <svg class="w-4 h-4 ml-1" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Custom animations for a smoother feel */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-down {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
    .animate-fade-down { animation: fade-down 0.6s ease-out forwards; }
    .animate-fade-up { animation: fade-up 0.6s ease-out forwards; }

    /* Staggered animations */
    .animation-delay-100 { animation-delay: 0.1s; }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-300 { animation-delay: 0.3s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-500 { animation-delay: 0.5s; }
    .animation-delay-600 { animation-delay: 0.6s; }
    .animation-delay-700 { animation-delay: 0.7s; }
    .animation-delay-800 { animation-delay: 0.8s; }

    /* This is a placeholder for actual 360 viewer functionality */
    /* In a real application, this would be handled by JavaScript */
    /* For this HTML/CSS only component, clicking the 360 button
       or thumbnails wouldn't change the image, but the hover effects
       and visual cues are in place to suggest interactivity. */
  </style>
</div>

360_Viewer_Component

A complex 360° viewer component with glassmorphism design, grayscale color scheme, and interactive elements, suitable for educational platforms. Includes full responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 relative font-sans">

  <!-- Background gradient for glassmorphism effect -->
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-950 opacity-20 dark:opacity-30"></div>

  <div class="relative w-full max-w-6xl mx-auto rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 border border-white/40 dark:border-gray-700/40 transform transition-all duration-300 ease-in-out sm:p-6 lg:p-8 flex flex-col lg:flex-row gap-6 lg:gap-8">

    <!-- Left Pane: 360 Viewer and Controls -->
    <div class="flex-1 flex flex-col gap-6">
      <!-- Viewer Area -->
      <div class="relative w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner border border-white/50 dark:border-gray-600/50 flex items-center justify-center">
        <img src="https://picsum.photos/1200/700?random=1" alt="360 Degree View" class="object-cover w-full h-full pointer-events-none select-none filter blur-sm opacity-70 absolute inset-0">
        <div class="absolute inset-0 flex items-center justify-center z-10">
          <!-- Actual 360 image Placeholder - would be replaced by JS library -->
          <img src="https://picsum.photos/1200/700?random=2" alt="Viewer content" class="w-full h-full object-contain mix-blend-multiply dark:mix-blend-screen opacity-90">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-16 h-16 rounded-full bg-black/30 dark:bg-white/30 backdrop-blur-sm flex items-center justify-center pointer-events-none">
              <svg class="w-8 h-8 text-white dark:text-black" 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="M4 6h16M4 12h16m-7 6h7"></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Hotspots/Interaction points placeholder -->
        <div class="absolute top-1/4 left-1/4 w-4 h-4 rounded-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-sm shadow-md cursor-pointer hover:scale-125 transition-transform duration-200" title="Hotspot 1"></div>
        <div class="absolute bottom-1/3 right-1/4 w-4 h-4 rounded-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-sm shadow-md cursor-pointer hover:scale-125 transition-transform duration-200" title="Hotspot 2"></div>

        <div class="absolute bottom-4 right-4 flex items-center space-x-2">
          <button class="p-2 rounded-full bg-white/60 dark:bg-gray-700/60 backdrop-blur-md shadow-md text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700/80 transition-colors" aria-label="Zoom In">
            <svg class="w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-white/60 dark:bg-gray-700/60 backdrop-blur-md shadow-md text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700/80 transition-colors" aria-label="Zoom Out">
            <svg class="w-5 h-5 rotate-90" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-4 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="flex items-center space-x-4">
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Previous"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></button>
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Play"><svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Next"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></button>
        </div>
        <div class="flex-1 min-w-0 flex items-center space-x-4 w-full sm:w-auto">
          <span class="text-gray-700 dark:text-gray-300 text-sm">0:34</span>
          <div class="relative flex-1 h-2 rounded-full bg-gray-300 dark:bg-gray-600 overflow-hidden group">
            <div class="h-full bg-gray-600 dark:bg-gray-300 rounded-full" style="width: 45%;"></div>
            <div class="absolute -top-1 left-[45%] -ml-2 w-4 h-4 bg-gray-800 dark:bg-gray-100 rounded-full shadow-lg group-hover:scale-110 transition-transform duration-200"></div>
          </div>
          <span class="text-gray-700 dark:text-gray-300 text-sm">2:10</span>
        </div>
        <div class="flex items-center space-x-2">
          <button class="p-2 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Toggle Fullscreen">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
          </button>
        </div>
      </div>

      <!-- Description/Information -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50">
        <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-gray-100">Understanding The Solar System</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Explore our solar system in a stunning 360-degree interactive tour. 
          Discover fascinating facts about each planet, from the fiery surface of Mercury to the icy rings of Saturn. Navigate through celestial bodies and learn about their unique characteristics and orbital paths. This module provides an immersive learning experience for all enthusiasts.
        </p>
        <div class="mt-4 flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
          <span><strong class="text-gray-800 dark:text-gray-200">Topic:</strong> Astronomy</span>
          <span><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 15 min</span>
          <span><strong class="text-gray-800 dark:text-gray-200">Views:</strong> 1.2k</span>
        </div>
      </div>
    </div>

    <!-- Right Pane: Timeline/Related Content -->
    <div class="w-full lg:w-80 flex-shrink-0 flex flex-col gap-6">

      <!-- Timeline/Navigation -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50 flex-grow min-h-[200px] lg:min-h-0">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Planetary Tour Timeline</h3>
        <ul class="space-y-4">
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Introduction: Welcome to the Cosmos</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">0:00 - 0:30</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Mercury & Venus: Inner Orbit</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">0:31 - 1:05</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-white dark:ring-gray-800 shadow-lg mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-900 dark:text-gray-50 leading-tight">Earth & Mars: Terrestrial Neighbors</p>
              <p class="text-sm mt-0.5 font-bold text-gray-800 dark:text-gray-200">1:06 - 2:00 (Current)</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Asteroid Belt & Jupiter: Gas Giant</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">2:01 - 3:15</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Saturn, Uranus & Neptune: Outer Giants</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">3:16 - 4:40</p>
            </div>
          </li>
           <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Beyond Neptune: Kuiper Belt & Oort Cloud</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">4:41 - 5:30</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Related Modules -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Related Modules</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=3" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">The Life Cycle of Stars</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Advanced Astronomy</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=4" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">Cosmic Distances & Galaxies</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Space Engineering</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=5" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">History of Space Exploration</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Historical Context</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

360_Viewer_Component

A simple, responsive 360° viewer component with microinteraction focus for business/corporate websites, featuring earth tones and dark mode support. Designed to simulate an interactive 360 viewer, allowing users to 'click and drag' to rotate an image.

Open Preview

                <div class="flex items-center justify-center p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] focus-within:ring-4 focus-within:ring-stone-400 dark:focus-within:ring-stone-600 outline-none">
    <div class="relative pb-56 sm:pb-64 md:pb-72 lg:pb-80 xl:pb-96 overflow-hidden transform group cursor-grab active:cursor-grabbing animated-hover">
      <!-- Background image to simulate 360 viewer area -->
      <img src="https://picsum.photos/1200/800?random=1" alt="Product view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 group-active:scale-100 rounded-t-lg" aria-label="360 degree product view area">

      <!-- Interactive Overlay -->
      <div class="absolute inset-0 flex flex-col items-center justify-center bg-stone-900/10 dark:bg-stone-700/20 transition-all duration-300 group-hover:bg-stone-900/20 dark:group-hover:bg-stone-700/30 group-active:bg-stone-900/5 dark:group-active:bg-stone-700/5 rounded-t-lg">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white opacity-90 transition-all duration-300 transform group-hover:scale-110 group-hover:opacity-100 group-active:scale-95 group-active:opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75S17.385 21.75 12 21.75 2.25 17.385 2.25 12zm1.605 8.682a.75.75 0 10-1.24-.967 11.25 11.25 0 01-1.61-4.463 11.25 11.25 0 01-1.612-4.463.75.75 0 10-1.24-.967c-1.325 1.76-2.553 3.614-3.66 5.549a1.75 1.75 0 000 1.902c1.107 1.935 2.335 3.789 3.66 5.549zM12 4.125a.75.75 0 00-.75.75V11.25c0 .414.336.75.75.75h4.875a.75.75 0 000-1.5H12V4.875a.75.75 0 00-.75-.75z"></path>
        </svg>
        <p class="mt-2 text-sm sm:text-base text-white font-semibold transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">Click and drag to rotate</p>
      </div>
    </div>

    <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-stone-800">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 transition-colors duration-300">Premium Product Showcase</h2>
      <p class="text-sm sm:text-base text-stone-600 dark:text-stone-300 mb-4 leading-relaxed transition-colors duration-300">
        Experience every intricate detail of our craftsmanship. Use the interactive viewer above to explore the product from all angles.
      </p>
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Company representative" class="w-10 h-10 rounded-full object-cover shadow-md">
          <div>
            <p class="text-stone-700 dark:text-stone-200 font-medium text-sm sm:text-base">Acme Innovations Inc.</p>
            <p class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Leading the future since 1999</p>
          </div>
        </div>
        <button class="flex items-center px-4 py-2 bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white rounded-md font-medium text-sm sm:text-base transition-all duration-300 transform active:scale-95 shadow-lg focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          <svg class="w-5 h-5 mr-2 -ml-1" 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 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          View Product Video
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Not strictly Tailwind but for the 'microinteraction' feel if JS was allowed */
/* This pseudo-class is for demonstration of where micro-interactions would be */
.animated-hover:hover {
  /* Example: add a subtle transform or shadow on hover. Tailwind handles this with utility classes. */
}

.group-active .group-hover\:opacity-100 {
    opacity: 0.8; /* Subtle change when active */
}

.group-active img {
    transform: scale(0.98); /* Simulating a 'push' effect on interaction */
}
</style>

Glassmorphism 360 Viewer Component

Glassmorphism 360° Viewer Component for a Dashboard with a Triadic color scheme, Simple complexity, responsive design and dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-lg p-6 bg-white bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center">Product 360° View</h2>
    <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <img src="https://picsum.photos/seed/tool/600/400" alt="360 Product View" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-20 dark:bg-blue-800 dark:bg-opacity-20 transform rotate-45 scale-150 opacity-0 transition-opacity duration-300 hover:opacity-100">
        <p class="text-white text-lg font-bold -rotate-45">360°</p>
      </div>
    </div>
    <div class="flex justify-around items-center">
      <button class="p-3 rounded-full bg-red-400 text-white dark:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-green-400 text-white dark:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <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="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

360 Viewer Component

A 360-degree viewer component with Glassmorphism design, monochromatic color scheme, and moderate complexity. It's designed for blog/content purposes, is responsive, and supports dark mode using Tailwind CSS. No JavaScript is included, only HTML with Tailwind classes. Uses picsum.photos for images.

Open Preview

                
<div class="dark:bg-gray-900 bg-gray-100 flex items-center justify-center min-h-screen p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-6 w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">360° Product Viewer</h2>
      <p class="text-gray-600 dark:text-gray-300">Experience the product from every angle.</p>
    </div>

    <div class="relative mb-6 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 aspect-video">
      <!-- Placeholder for 360 viewer - In a real scenario, this would be a series of images or a specialized viewer library -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100" id="viewer-image">
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
      <img src="https://picsum.photos/600/400?random=3" alt="Product View 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
    </div>

    <div class="flex justify-center space-x-2 mb-6">
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" 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 19l-7-7 7-7"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" 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="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300 text-sm">
      <p>Drag or use arrows to rotate view (interactive features would require JavaScript).</p>
    </div>
  </div>
</div>

360° Viewer Component

A responsive 360° viewer component with microinteractions for social media, featuring light and dark themes using analogous colors and moderate complexity.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- 360° Viewer Component -->
  <div class="relative w-full max-w-sm md:max-w-md lg:max-w-lg mb-8 group">
    
    <!-- Image Stack (simulating 360 view) -->
    <div class="relative w-full h-80 rounded-lg overflow-hidden shadow-lg group-hover:scale-105 transition-transform duration-300">
      <!-- Base Image -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100 group-hover:opacity-0">
      <!-- Layered Images (for hover effect) -->
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0 group-hover:opacity-100">
    </div>

    <!-- Microinteraction: Viewfinder effect -->
    <div class="absolute inset-0 border-4 border-transparent group-hover:border-blue-400 dark:group-hover:border-blue-600 rounded-lg pointer-events-none transition-all duration-300"></div>

    <!-- Microinteraction: "Drag to spin" hint -->
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black bg-opacity-70 text-white text-xs px-3 py-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Drag to spin
    </div>

    <!-- Microinteraction: Navigation Dots -->
    <div class="absolute bottom-4 right-4 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <span class="block w-2.5 h-2.5 bg-white rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
      <span class="block w-2.5 h-2.5 bg-gray-400 rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
      <span class="block w-2.5 h-2.5 bg-gray-400 rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
    </div>

  </div>

  <!-- Social Media Context (Example) -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover mr-3">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Doe</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
      Check out this amazing new product! What do you think of the 360&deg; view?
    </p>
    <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" 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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H3v-3.371a2 2 0 01.781-1.608l1.609-1.609A5 5 0 0112 11.206V10z"></path></svg>
        <span>120 Likes</span>
      </div>
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span>34 Comments</span>
      </div>
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" 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="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M19 15l1-2 2-2M15 15l-1-2-2-2M18 19 21 21M9 19l3 2 3-2M5 19l-3 2-2-2M13 13c0-2-3-3-3-3s-3 1-3 3-1 4 2 5 2 2-3 2-4-1-4-1"></path></svg>
        <span>Share</span>
      </div>
    </div>
  </div>

</div>

<style>
  /* This is a simplified simulation. A true 360 viewer would use JavaScript to dynamically change images based on drag. */
  /* The hover effects provide a basic microinteraction experience. */
</style>

360DegreeViewerComponent

A simple 360 viewer component with a brutalist design, complementary colors, and dark mode support. Uses only HTML and Tailwind CSS.

Open Preview

                <div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
  
  <!-- Brutalist Border -->
  <div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>

  <div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900 
                      border-4 border-stone-950 dark:border-amber-50 
                      shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
    
    <h1 class="text-4xl md:text-5xl lg:text-6xl 
               font-extrabold mb-6 
               uppercase 
               border-b-4 border-amber-50 dark:border-stone-900 
               pb-2">
      360° Viewer
    </h1>
    
    <div class="relative w-full aspect-video 
                bg-stone-950 dark:bg-amber-50 
                border-4 border-stone-950 dark:border-amber-50 
                overflow-hidden
                mb-6">
      <!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
      <img src="https://picsum.photos/seed/360view/800/450" 
           alt="360 degree view placeholder" 
           class="w-full h-full object-cover opacity-70">
      <div class="absolute inset-0 flex items-center justify-center">
        <p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
          Content Placeholder
        </p>
      </div>
    </div>
    
    <p class="text-lg md:text-xl leading-relaxed mb-6">
      Explore this object from every angle. 
      This brutalist design emphasizes raw functionality and stark contrasts. 
      A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
    </p>
    
    <div class="flex justify-between items-center">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" 
             alt="Author Avatar" 
             class="w-12 h-12 md:w-16 md:h-16 rounded-full 
                    border-4 border-stone-950 dark:border-amber-50 
                    shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
        <span class="text-xl font-bold">J. Doe</span>
      </div>
      <a href="#" class="inline-block px-6 py-3 
                           bg-stone-950 dark:bg-amber-50 
                           text-amber-50 dark:text-stone-900 
                           uppercase font-bold 
                           border-4 border-stone-950 dark:border-amber-50 
                           shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
                           hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
        Learn More
      </a>
    </div>

  </div>
</div>

Search Components

Categories

360° Viewer