360°ビューア

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

              

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

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

                <div class="flex flex-col items-center justify-center dark:bg-gray-800 bg-gray-200 min-h-screen p-5">
    <h2 class="text-3xl font-bold mb-5 text-gray-900 dark:text-white">360° Viewer</h2>
    <div class="relative w-full max-w-xl">
        <div class="overflow-hidden rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-auto transition-transform duration-500 ease-in-out transform hover:scale-105" />
            <div class="absolute inset-0 flex items-center justify-center">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200">Rotate Left</button>
                <button class="bg-green-500 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200 ml-4">Rotate Right</button>
            </div>
        </div>
    </div>
    <div class="flex justify-between w-full max-w-xl mt-4">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
    </div>
</div>
              

                <div class="max-w-xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-300 mb-4">Product 360° Viewer</h2>
    <div class="relative w-full h-72 overflow-hidden rounded-lg shadow-lg border border-brown-200 dark:border-brown-700">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="object-cover h-full w-full transition-transform duration-300 ease-in-out hover:scale-105">
        <div class="absolute inset-0 flex items-center justify-center">
            <button class="bg-brown-600 text-white font-semibold rounded-full px-4 py-2 transition-transform duration-300 ease-in-out transform hover:scale-110 dark:bg-brown-700">Rotate</button>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-xl font-semibold text-brown-700 dark:text-brown-200">Product Name</h3>
        <p class="text-brown-600 dark:text-brown-400">This is a brief description of the product. It is made from high-quality materials and is perfect for your needs.</p>
        <div class="flex items-center mt-2">
            <span class="text-lg font-bold text-brown-800 dark:text-brown-300">$49.99</span>
        </div>
    </div>
</div>

              

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 transform rotate-45 bg-gray-300 dark:bg-gray-700"></div>
    <div class="absolute inset-0 transform -rotate-45 bg-gray-400 dark:bg-gray-600"></div>
    <div class="absolute inset-4 flex justify-center items-center bg-white dark:bg-gray-800">
      <div class="w-32 h-32 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
        <svg class="w-16 h-16 text-gray-500 dark:text-gray-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="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14m-7 0l-4.553 2.276A1 1 0 013 15.382v-6.764a1 1 0 011.447-.894L7 10m0 4v6a1 1 0 001 1h3v-60H8a1 1 0 00-1 1v6zmz"></path></svg>
      </div>
    </div>
  </div>
</div>
              

                <!-- Start of Pastel Brutalist 360 Asset Viewer Component -->
<div class="w-full max-w-lg bg-pink-100 dark:bg-slate-800 border-4 border-pink-500 dark:border-pink-600 p-4 sm:p-6 shadow-[8px_8px_0px_#ec4899] dark:shadow-[8px_8px_0px_#db2777] hover:shadow-[4px_4px_0px_#ec4899] dark:hover:shadow-[4px_4px_0px_#db2777] transition-all duration-200">
  <!-- Header/Title -->
  <div class="mb-4 pb-2 border-b-4 border-pink-500 dark:border-pink-600">
    <h2 class="text-2xl sm:text-3xl font-bold text-pink-700 dark:text-pink-300 uppercase tracking-wider">
      360° Asset View
    </h2>
  </div>

  <!-- Image container -->
  <div class="relative w-full aspect-video bg-pink-50 dark:bg-slate-700 border-2 border-pink-300 dark:border-pink-500 mb-4">
    <img src="https://picsum.photos/seed/asset360viewer/800/450" alt="360 degree rotating view of an asset" class="w-full h-full object-cover"/>
    <!-- Optional: Visual cue for interactivity -->
    <div class="absolute inset-0 flex items-center justify-center opacity-30 hover:opacity-60 transition-opacity">
      <svg class="w-16 h-16 text-pink-600 dark:text-pink-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="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
    </div>
  </div>

  <!-- Static "Controls" -->
  <div class="flex flex-col sm:flex-row justify-around items-center space-y-3 sm:space-y-0 sm:space-x-3">
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Left
    </button>
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Zoom
    </button>
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Right
    </button>
  </div>

  <!-- Dashboard-like Info Footer -->
  <div class="mt-6 pt-3 border-t-2 border-pink-300 dark:border-pink-500 text-sm text-pink-600 dark:text-pink-400">
    <p>Asset ID: <span class="font-semibold">XYZ-789</span> | Status: <span class="font-semibold text-green-600 dark:text-green-400">Active</span></p>
    <p class="mt-1">Hint: This is a static visual representation.</p>
  </div>
</div>
<!-- End of Pastel Brutalist 360 Asset Viewer Component -->
              

                <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-lg rounded-lg shadow-lg overflow-hidden">
        <!-- 360 Viewer Wrapper -->
        <div class="aspect-w-16 aspect-h-9">
            <img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
                <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
    </div>

    <div class="flex justify-center mt-4 space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
        <button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
    </div>
</div>
              

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">360° Viewer</h2>
    <div class="mt-4 w-full max-w-md h-64 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden shadow-inner">
        <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-full object-cover transition-transform hover:scale-105 duration-300" />
    </div>
    <div class="mt-4 flex items-center">
        <div class="flex-shrink-0">
            <img class="w-10 h-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        </div>
        <div class="ml-3">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 1 hour ago</p>
        </div>
    </div>
    <div class="mt-4">
        <button class="px-4 py-2 text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Interact</button>
    </div>
</div>
              

                <div class="flex flex-col items-center justify-center p-5 bg-gray-900 text-white dark:bg-gray-800">
    <h2 class="text-3xl font-bold mb-4">360° Product Viewer</h2>
    <div class="flex items-center justify-center space-x-5 mb-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="border-4 border-red-600 dark:border-blue-400 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
        <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="border-4 border-yellow-400 dark:border-green-500 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
        <img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="border-4 border-blue-500 dark:border-red-600 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
    </div>
    <p class="text-center mb-5">Rotate through the product images to see more details.</p>
    <div class="flex space-x-3">
        <button class="bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-red-700 dark:hover:bg-red-500 transition duration-200">Previous</button>
        <button class="bg-yellow-400 text-gray-900 font-bold py-2 px-4 rounded-lg shadow-md hover:bg-yellow-500 dark:bg-green-600 dark:text-white dark:hover:bg-green-500 transition duration-200">Next</button>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-400 dark:border-green-500" />
        <p class="mt-2 text-center font-medium">Customer Review</p>
    </div>
</div>