Search Components

360° Viewer

Interactive viewer for 360-degree images or videos

360_Viewer_Component

A complex 360-degree property viewer component for real estate platforms, featuring a monospace/developer design, retro/vintage color palette, and full responsiveness with dark mode support.

Open Preview

                <div class="font-mono bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-6xl mx-auto border border-gray-300 dark:border-gray-700">

  <!-- Header: Component Title and Status -->
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-gray-400 dark:border-gray-600 pb-4">
    <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 uppercase tracking-wide mb-2 sm:mb-0">
      <span class="text-cyan-600 dark:text-cyan-400">//</span> PROPERTY_VIEWER<span class="animate-pulse text-red-500">_LIVE</span>
    </h2>
    <div class="flex items-center text-sm sm:text-base">
      <span class="mr-2 text-green-600 dark:text-green-400">STATUS: OK</span>
      <span class="text-yellow-600 dark:text-yellow-400">[BUILD: 2023.10.26]</span>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Main Viewer Area -->
    <div class="md:col-span-2 bg-gray-200 dark:bg-gray-800 rounded-lg p-3 sm:p-4 border border-gray-300 dark:border-gray-700 shadow-inner overflow-hidden relative aspect-video">
      <div class="w-full h-full bg-cover bg-center rounded-md" style="background-image: url('https://picsum.photos/1000/600?random=1&blur=2');">
        <div class="h-full w-full flex items-center justify-center bg-black bg-opacity-20">
          <span class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-widest uppercase">VIEW_360°_ACTIVE</span>
        </div>
      </div>

      <!-- Interactive Controls Overlay -->
      <div class="absolute bottom-3 left-3 right-3 p-3 sm:p-4 bg-gray-800 bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80 rounded-lg flex flex-wrap justify-center sm:justify-between items-center space-x-2 sm:space-x-4">

        <div class="flex space-x-2">
          <button class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-cyan-700 dark:border-cyan-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> ZOOM<span class="hidden lg:inline">_IN</span>
          </button>
          <button class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-cyan-700 dark:border-cyan-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> ZOOM<span class="hidden lg:inline">_OUT</span>
          </button>
        </div>

        <div class="flex space-x-2 mt-2 sm:mt-0">
          <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-indigo-700 dark:border-indigo-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> FLOOR<span class="hidden lg:inline">_PLAN</span>
          </button>
          <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-indigo-700 dark:border-indigo-500 shadow-md transform hover:scale-105">
            <p class="hidden sm:inline">//</p> NEXT<span class="hidden lg:inline">_ROOM</span>
          </button>
        </div>

        <input type="range" min="0" max="100" value="50" class="w-24 sm:w-32 lg:w-48 h-2 bg-gray-600 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg transition duration-200 ease-in-out mt-2 sm:mt-0">
      </div>

    </div>

    <!-- Sidebar / Property Details & Thumbnails -->
    <div class="md:col-span-1 flex flex-col space-y-6">

      <!-- Property Details -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 lg:p-5 border border-gray-300 dark:border-gray-700 shadow-lg">
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 uppercase tracking-wide">
          <span class="text-purple-600 dark:text-purple-400">//</span> PROPERTY_DETAILS
        </h3>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">ID:</span> <span class="tracking-wide">#4815162342</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">TYPE:</span> <span class="tracking-wide">CONDO_UNIT</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">SIZE:</span> <span class="tracking-wide">1200_SQFT</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">BEDS:</span> <span class="tracking-wide">3</span></p>
        <p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">BATHS:</span> <span class="tracking-wide">2.5</span></p>
        <p class="text-sm"><span class="text-yellow-600 dark:text-yellow-400">PRICE:</span> <span class="tracking-wide">$_349,000</span></p>
      </div>

      <!-- Thumbnail Navigation -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 lg:p-5 border border-gray-300 dark:border-gray-700 shadow-lg">
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 uppercase tracking-wide">
          <span class="text-fuchsia-600 dark:text-fuchsia-400">//</span> ROOM_SELECT
        </h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-3">
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">LIVING_RM</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">KITCHEN</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent border-cyan-500 shadow-md transform scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
              <span class="text-white text-sm font-semibold">MASTER_BD</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">BATHROOM</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">BALCONY</span>
            </div>
          </div>
          <div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-md">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <span class="text-white text-sm font-semibold">DINING_RM</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Footer: Agent Info and System Message -->
  <div class="mt-6 pt-4 border-t border-gray-400 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
    <div class="flex items-center mb-4 sm:mb-0">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Agent Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-500">
      <div>
        <p class="text-sm text-gray-900 dark:text-gray-100"><span class="text-green-600 dark:text-green-400">AGENT:</span> <span class="font-bold">JOHN_DOE</span></p>
        <p class="text-xs text-gray-600 dark:text-gray-400"><span class="text-green-600 dark:text-green-400">CONTACT:</span> +1.555.VIEW.360</p>
      </div>
    </div>
    <p class="text-xs text-gray-500 dark:text-gray-400">SYSTEM: Ready. Awaiting user input. <span class="animate-pulse text-gray-600 dark:text-gray-300">_</span></p>
  </div>

</div>

A complex 360° product viewer component with an industrial, raw aesthetic using a purple/violet color scheme, suitable for a portfolio. Features interactive elements, responsive design, 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 sm:p-6 lg:p-8 font-sans">

  <div class="w-full max-w-6xl rounded-lg shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-800 to-indigo-900 dark:from-gray-800 dark:to-gray-900
              border-4 border-purple-900 dark:border-gray-700
              text-gray-100 dark:text-gray-200">

    <!-- Header & Controls -->
    <div class="p-4 sm:p-6 border-b-2 border-purple-900 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-200 dark:text-gray-100 uppercase tracking-wide">
        Product Viewer
      </h2>
      <div class="flex items-center space-x-3">
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex flex-col lg:flex-row">
      <!-- 360 Viewer Section (Left/Top) -->
      <div class="lg:w-3/4 p-4 sm:p-6 lg:p-8 border-b-2 lg:border-b-0 lg:border-r-2 border-purple-900 dark:border-gray-700 relative">
        <div class="aspect-w-16 aspect-h-9 bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden border-2 border-purple-700 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/id/1018/1200/675" alt="Product 360 view" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy">
          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-16 h-16 text-white text-opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <!-- 360 Control Bar -->
        <div class="flex justify-center items-center mt-6 space-x-2">
          <button class="p-2 rounded-lg bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 text-purple-200 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0V9.414L10 12.586 6.707 9.414V15.707a1 1 0 01-1.414 0L.586 10l.585-.586a1 1 0 011.415 0L5 12.414v-5.828a1 1 0 112 0v5.828l2.586-2.586A1 1 0 0110 9a1 1 0 01.707.293L12 11.586V5.414a1 1 0 112 0v5.828l2.586-2.586a1 1 0 011.415 0l.585.586a1 1 0 010 1.414l-5 5z" clip-rule="evenodd"></path></svg>
          </button>
          <input type="range" min="0" max="359" value="180" class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-purple-600 dark:bg-gray-600 focus:outline-none
            [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-300 [&::-webkit-slider-thumb]:dark:bg-gray-300 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:appearance-none
            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-300 [&::-moz-range-thumb]:dark:bg-gray-300 [&::-moz-range-thumb]:shadow-lg">
          <button class="p-2 rounded-lg bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 text-purple-200 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0V9.414L10 12.586 6.707 9.414V15.707a1 1 0 01-1.414 0L.586 10l.585-.586a1 1 0 011.415 0L5 12.414v-5.828a1 1 0 112 0v5.828l2.586-2.586A1 1 0 0110 9a1 1 0 01.707.293L12 11.586V5.414a1 1 0 112 0v5.828l2.586-2.586a1 1 0 011.415 0l.585.586a1 1 0 010 1.414l-5 5z" clip-rule="evenodd"></path></svg>
          </button>
        </div>

        <!-- Hotspots/Annotations (placeholder) -->
        <div class="absolute top-1/4 left-1/4 p-1.5 bg-purple-500 rounded-full cursor-pointer border-2 border-purple-300 z-10 animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
        <div class="absolute bottom-1/3 right-1/4 p-1.5 bg-purple-500 rounded-full cursor-pointer border-2 border-purple-300 z-10 animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
      </div>

      <!-- Product Details & Controls (Right/Bottom) -->
      <div class="lg:w-1/4 p-4 sm:p-6 lg:p-8 flex flex-col gap-6">
        <div class="flex-1">
          <h3 class="text-2xl sm:text-3xl font-bold text-purple-100 dark:text-gray-100 mb-3">Industrial Cogwheel</h3>
          <p class="text-purple-200 dark:text-gray-300 text-sm mb-4 leading-relaxed tracking-wide">
            Crafted from reinforced steel, this cogwheel exhibits precise engineering and robust durability, ideal for heavy machinery applications.
          </p>
          
          <div class="text-lg mb-4">
            <span class="text-purple-300 dark:text-gray-400">Model ID:</span> <span class="font-semibold text-white dark:text-gray-200">XYZ789-A</span>
          </div>

          <div class="mb-6">
            <h4 class="text-xl font-semibold text-purple-200 dark:text-gray-200 mb-2">Key Features:</h4>
            <ul class="list-disc list-inside text-purple-200 dark:text-gray-300 text-sm space-y-1">
              <li>High-strength alloy construction</li>
              <li>Precision-machined teeth</li>
              <li>Corrosion-resistant coating</li>
              <li>Optimized for torque transfer</li>
            </ul>
          </div>
        </div>

        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 border-2 border-purple-600 dark:border-gray-600 rounded-lg text-lg font-bold uppercase
                         bg-purple-700 dark:bg-gray-700 text-purple-100 dark:text-gray-100
                         hover:bg-purple-600 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 10a7.001 7.001 0 00-6-6.93V4a1 1 0 00-2 0v.07A7.001 7.001 0 003 10a7.001 7.001 0 006 6.93V17a1 1 0 102 0v-.07z" clip-rule="evenodd"></path></svg>
            Request Quote
          </button>
          <button class="w-full flex items-center justify-center px-6 py-3 border-2 border-purple-500 dark:border-gray-500 rounded-lg text-lg font-bold uppercase
                         bg-transparent text-purple-200 dark:text-gray-200
                         hover:bg-purple-800 dark:hover:bg-gray-800 transition duration-300 transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
            Download Specs
          </button>
        </div>

      </div>
    </div>

  </div>

</div>

360_viewer_component

A complex, vibrant, skeuomorphic 360-degree product viewer component for fashion/beauty, fully responsive with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 flex items-center justify-center p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
  <div class="relative w-full max-w-4xl bg-gradient-to-br from-purple-300 via-pink-300 to-yellow-300 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-800 rounded-3xl shadow-2xl p-8 transform transition-all duration-300 hover:scale-[1.01] overflow-hidden border-2 border-purple-400 dark:border-purple-700">
    <!-- 'Glass' inset effect -->
    <div class="absolute inset-4 -m-2 rounded-2xl bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm shadow-inner-lg dark:bg-black dark:bg-opacity-20"></div>

    <div class="relative z-10 flex flex-col lg:flex-row gap-8">
      <!-- Product Image / 360 Viewer Area -->
      <div class="flex-1 lg:w-3/5 relative bg-white dark:bg-gray-700 rounded-2xl shadow-xl overflow-hidden p-4 group">
        <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-contain rounded-xl transition-transform duration-500 group-hover:scale-105">
        <!-- 360 degree indicator disc -->
        <div class="absolute bottom-4 right-4 bg-purple-600 dark:bg-purple-900 rounded-full w-16 h-16 flex items-center justify-center shadow-lg transform group-hover:rotate-180 transition-transform duration-700">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M9.546 1.046a.5.5 0 01.908 0l2 3.5a.5.5 0 01-.454.704H7.992a.5.5 0 01-.454-.704l2-3.5zM12.93 16.924a.5.5 0 01.707 0l2 2a.5.5 0 01.011.707l-2 2a.5.5 0 01-.707-.011l-1.92-1.92-1.92 1.92A.5.5 0 018.069 20a.5.5 0 01-.011.707l-2-2a.5.5 0 01-.707-.011l-2-2a.5.5 0 01.707-.707L5 17.062V13.5a.5.5 0 011 0v3.562l1.93-1.93a.5.5 0 01.707 0l2 2z" clip-rule="evenodd"></path>
          </svg>
           <span class="absolute text-xs text-white -bottom-4">360°</span>
        </div>

        <!-- Skeuomorphic controls (dials/buttons) -->
        <div class="absolute bottom-4 left-4 flex space-x-2">
          <button class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 active:from-green-600 active:to-blue-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-green-300 dark:border-green-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 active:from-orange-600 active:to-red-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-orange-300 dark:border-orange-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 15.707a1 1 0 010-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Product Details & Options -->
      <div class="flex-1 lg:w-2/5 flex flex-col gap-6">
        <!-- Product Title & Price -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-pink-400 dark:border-pink-700">
          <h2 class="text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-2 drop-shadow-md">Radiant Glow Elixir</h2>
          <p class="text-2xl font-bold text-pink-600 dark:text-pink-400">$99.00</p>
        </div>

        <!-- Color Options (Skeuomorphic buttons) -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-yellow-400 dark:border-yellow-700">
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Choose Shade:</h3>
          <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            <button class="w-14 h-14 bg-red-400 rounded-full shadow-md border-4 border-transparent hover:border-red-600 dark:hover:border-red-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-teal-400 rounded-full shadow-md border-4 border-transparent hover:border-teal-600 dark:hover:border-teal-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-blue-400 rounded-full shadow-md border-4 border-transparent hover:border-blue-600 dark:hover:border-blue-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-yellow-400 rounded-full shadow-md border-4 border-transparent hover:border-yellow-600 dark:hover:border-yellow-900 transform transition-all duration-200 active:scale-90 relative selected">
              <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
              <span class="absolute inset-0 ring-4 ring-yellow-500 dark:ring-yellow-400 rounded-full"></span>
            </button>
            <button class="w-14 h-14 bg-purple-400 rounded-full shadow-md border-4 border-transparent hover:border-purple-600 dark:hover:border-purple-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
          </div>
        </div>

        <!-- Add to Cart Button -->
        <button class="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 active:from-green-700 active:to-blue-800 text-white font-extrabold text-2xl py-4 rounded-full shadow-2xl skew-y-1 hover:skew-y-0 transform transition-all duration-300 border-4 border-green-400 dark:border-green-700 dark:text-blue-200">
          <span class="drop-shadow-md">ADD TO BAG</span>
        </button>
      </div>
    </div>

    <!-- Decorative light/shadow effects for skeuomorphism -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-white bg-opacity-30 rounded-full transform -translate-x-1/2 -translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-pink-400 bg-opacity-30 rounded-full transform translate-x-1/2 translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
  </div>
</div>

360_Viewer_Component

A complex 360° product viewer component designed for entertainment/media platforms, featuring heavy use of color gradients and smooth transitions within a warm neutral color scheme. It is fully responsive and supports dark mode.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-100 p-4 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 flex items-center justify-center font-sans">
  <div class="w-full max-w-5xl rounded-3xl shadow-xl overflow-hidden backdrop-blur-sm bg-white/70 dark:bg-gray-700/70 dark:shadow-2xl dark:shadow-amber-900/30 transition-all duration-500 border border-amber-50 dark:border-gray-600">
    <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Left Sidebar (Product Details/Controls) -->
      <div class="lg:col-span-1 xl:col-span-1 bg-gradient-to-t from-orange-100 to-white p-6 dark:from-gray-800 dark:to-gray-900 border-r border-amber-100 dark:border-gray-700 space-y-6 flex flex-col justify-between">
        <div>
          <h2 class="text-3xl font-extrabold text-gray-800 dark:text-amber-200 mb-2 leading-tight">Next-Gen VR Headset <span class="block text-xl font-semibold text-amber-600 dark:text-amber-400">A New Reality Awaits</span></h2>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience immersive virtual worlds with unparalleled clarity and comfort. Advanced haptics and spatial audio redefine entertainment.</p>

          <div class="space-y-3 mb-6">
            <div class="flex items-center text-gray-700 dark:text-gray-200">
              <svg class="w-5 h-5 mr-2 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.664 12.035a1 1 0 01.336 1.118l-.5 2A1 1 0 019 16h2a1 1 0 011 1v1a1 1 0 11-2 0v-.585l-.25-1A1 1 0 009.664 12.035zM12 9a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M9.293 8.293a1 1 0 011.414 0L12 9.586l1.293-1.293a1 1 0 011.414 1.414L13.414 11l1.293 1.293a1 1 0 01-1.414 1.414L12 12.414l-1.293 1.293a1 1 0 01-1.414-1.414L10.586 11l-1.293-1.293a1 1 0 010-1.414zM10 2a8 8 0 100 16 8 8 0 000-16zM2 10a8 8 0 1116 0 8 8 0 01-16 0z" clip-rule="evenodd"></path></svg>
              <span>Resolution: 4K per eye</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-200">
              <svg class="w-5 h-5 mr-2 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
              <span>Refresh Rate: 120Hz</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-200">
              <svg class="w-5 h-5 mr-2 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              <span>Connectivity: Wireless & USB-C</span>
            </div>
          </div>
        </div>

        <!-- Controls -->
        <div class="mt-auto space-y-4">
          <button class="w-full flex items-center justify-center px-4 py-3 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 text-white font-semibold shadow-lg hover:from-amber-600 hover:to-orange-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800 transition-all duration-300 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553L16.25 6H5.953L5.477 3H3zM9 18a1 1 0 100-2 1 1 0 000 2zm7 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
            Buy Now
          </button>
          <button class="w-full flex items-center justify-center px-4 py-3 rounded-xl bg-gray-200 text-gray-700 font-semibold shadow-md hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 dark:focus:ring-gray-600 transition-all duration-300 border border-gray-300 dark:border-gray-500 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            View in AR
          </button>
        </div>
      </div>

      <!-- Main 360 Viewer Area -->
      <div class="lg:col-span-2 xl:col-span-3 h-[400px] sm:h-[500px] lg:h-[600px] relative overflow-hidden bg-gradient-to-r from-amber-50 dark:from-gray-700 to-orange-50 dark:to-gray-600 flex items-center justify-center">
        <div class="absolute inset-0 bg-contain bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
        
        <div class="absolute inset-0 backdrop-blur-sm bg-gradient-to-tr from-black/5 to-transparent flex items-center justify-center">
          <div class="relative w-48 h-48 sm:w-64 sm:h-64 lg:w-80 lg:h-80 rounded-full bg-gradient-to-br from-amber-300/80 to-orange-400/80 dark:from-amber-600/80 dark:to-orange-700/80 animate-pulse-slow flex items-center justify-center shadow-lg">
            <div class="w-32 h-32 sm:w-48 sm:h-48 lg:w-64 lg:h-64 rounded-full border-4 border-white/50 dark:border-gray-300/50 flex items-center justify-center p-2">
              <img src="https://picsum.photos/400/400?random=2" alt="360 Product View Placeholder" class="w-full h-full object-cover rounded-full shadow-inner border border-white dark:border-gray-500">
            </div>
            <div class="absolute bottom-4 right-4 flex items-center bg-gray-800/80 text-white px-3 py-1 rounded-full text-xs sm:text-sm shadow-md backdrop-blur-sm">
              <svg class="w-4 h-4 mr-1 text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 7C2.9 7 2 7.9 2 9v6h16V9c0-1.1-.9-2-2-2H4zm0 2h16c.3 0 .6-.1.8-.4.2-.3.2-.6 0-.9-.2-.3-.5-.4-.8-.4H4c-.3 0-.6.1-.8.4-.2.3-.2.6 0 .9.2.3.5.4.8.4zM2 15a2 2 0 002 2h12a2 2 0 002-2v-6H2v6z" clip-rule="evenodd"></path><path d="M10 11a1 1 0 100 2 1 1 0 000-2z"></path></svg>
              360° View Ready
            </div>
          </div>
        </div>

        <!-- 360 Controls / Progress Bar -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 w-[calc(100%-48px)] max-w-lg">
          <div class="flex items-center space-x-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl px-5 py-3 rounded-full shadow-lg border border-amber-100 dark:border-gray-700">
            <button class="p-2 rounded-full bg-amber-500 text-white shadow-md hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.553 4.553A1 1 0 015.26 4H14.74a1 1 0 01.707.293l3.586 3.586a1 1 0 010 1.414l-3.586 3.586A1 1 0 0114.74 16H5.26a1 1 0 01-.707-.293L.967 11.707A1 1 0 01.967 10.293l3.586-3.586zM11 9a1 1 0 100 2h2a1 1 0 100-2h-2zm-6 2a1 1 0 100-2h2a1 1 0 100 2H5z" clip-rule="evenodd"></path></svg>
            </button>
            <div class="flex-1 h-2 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-600">
              <div class="h-full bg-gradient-to-r from-amber-400 to-orange-500 w-1/3 rounded-full transition-all duration-500 ease-out" style="width: 30%;"></div>
            </div>
            <button class="p-2 rounded-full bg-gray-200 text-gray-700 shadow-md hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 dark:focus:ring-gray-600 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 016 0v5a1 1 0 11-2 0V7a1 1 0 00-1-1h-1z" clip-rule="evenodd"></path></svg>
            </button>
            <button class="p-2 rounded-full bg-gray-200 text-gray-700 shadow-md hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 dark:focus:ring-gray-600 transition-colors duration-200 hidden sm:block">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 4a1 1 0 112 0 1 1 0 01-2 0zm5-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <!-- Hotspot Indicators (example) -->
        <div class="absolute top-1/4 left-1/4 animate-bounce-slow flex items-center justify-center">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
          </span>
        </div>
        <div class="absolute bottom-1/3 right-1/4 animate-bounce-slow flex items-center justify-center">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
          </span>
        </div>

      </div>

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

360_Viewer_Component_Retro_Rainbow_Simple_Ecommerce

A simple, retro-themed 360 viewer component for e-commerce, featuring a rainbow gradient, responsive design, and dark mode support. Designed to evoke 80s/90s nostalgia.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono text-gray-800 dark:text-gray-200">
  <div class="w-full max-w-sm p-4 border-4 border-b-8 border-r-8 border-[#1A1A1A] dark:border-gray-600 rounded-lg shadow-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 overflow-hidden relative group">
    <!-- Top 'display' section -->
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-t-sm p-1 shadow-inner opacity-90">
      <div class="bg-black border border-gray-700 rounded-sm overflow-hidden aspect-video relative flex items-center justify-center">
        <img src="https://picsum.photos/400/300?random=1" alt="Product view" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"/>
        <!-- 'Lens flare' effect -->
        <div class="absolute w-1/2 h-1/2 bg-white opacity-10 rounded-full blur-xl animate-pulse"></div>
      </div>
    </div>

    <!-- Controls section -->
    <div class="p-3 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 rounded-b-md shadow-inner mt-2 border-t-2 border-black dark:border-gray-800">
      <div class="flex justify-around items-center space-x-2">
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          &lt; prev
        </button>
        <button class="relative flex-none w-16 h-16 bg-gradient-to-br from-yellow-300 via-orange-400 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-800 rounded-full border-4 border-yellow-200 dark:border-yellow-500 grid place-items-center text-gray-900 dark:text-gray-100 font-extrabold text-2xl shadow-lg hover:from-yellow-200 hover:to-red-400 hover:shadow-xl transition-all duration-300 animate-bounce-slowest">
          &#x21BB;
          <!-- 360 icon -->
          <span class="absolute top-1 right-1 text-xs text-black dark:text-white transform rotate-12">360°</span>
        </button>
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          next &gt;
        </button>
      </div>
      <div class="flex justify-around items-center text-xs mt-3 text-white dark:text-gray-900 font-bold opacity-80">
        <span>Angle: 0°</span>
        <span>Zoom: 1x</span>
      </div>
    </div>

    <!-- Decorative 'LED' indicators -->
    <div class="absolute top-4 left-4 flex space-x-1.5">
      <span class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow shadow-lg shadow-red-500/50"></span>
      <span class="w-3 h-3 rounded-full bg-yellow-400 animate-pulse-slow animation-delay-100 shadow-lg shadow-yellow-400/50"></span>
      <span class="w-3 h-3 rounded-full bg-green-500 animate-pulse-slow animation-delay-200 shadow-lg shadow-green-500/50"></span>
    </div>

    <!-- Retro Price Tag -->
    <div class="absolute bottom-4 right-4 bg-gradient-to-br from-lime-300 to-green-500 dark:to-green-700 px-4 py-2 rounded-lg rotate-6 border-2 border-green-700 dark:border-green-300 shadow-xl font-bold text-lg text-black dark:text-gray-900 opacity-95 group-hover:rotate-0 group-hover:scale-110 transition-all duration-300">
        <span class="text-sm line-through text-red-700 dark:text-red-300">$129.99</span><br>$99.99
    </div>
  </div>

  <!-- Custom animations for retro feel -->
  <style>
    @keyframes bounce-slowest {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    .animate-bounce-slowest {
      animation: bounce-slowest 3s infinite ease-in-out;
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }
    .animation-delay-100 {
      animation-delay: 0.1s;
    }
    .animation-delay-200 {
      animation-delay: 0.2s;
    }
  </style>
</div>

360_viewer_component

A simple, minimalist 360 viewer component designed for educational platforms, featuring bright neon/electric colors and strong typography, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out border-2 border-transparent dark:border-transparent dark:hover:border-electric-blue-500 relative group">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-electric-blue-500 to-lime-green-500 opacity-20 dark:from-hot-pink-500 dark:to-electric-blue-500 dark:opacity-10 rounded-lg group-hover:opacity-30 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tighter text-center sm:text-left">
        <span class="text-electric-blue-500 dark:text-hot-pink-500">360°</span> <span class="text-lime-green-500 dark:text-electric-blue-500">Explorer</span>
      </h2>

      <div class="relative w-full h-48 sm:h-64 md:h-80 lg:h-96 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden mb-6 sm:mb-8 flex items-center justify-center border-4 border-electric-blue-400 dark:border-hot-pink-400 transform hover:scale-[1.01] transition-transform duration-300">
        <!-- Placeholder for 360 image (could be an actual 360 viewer library in a real app) -->
        <img src="https://picsum.photos/800/600?random=1" alt="360-degree view placeholder" class="w-full h-full object-cover select-none filter group-hover:blur-sm transition-all duration-300">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60 text-white text-base sm:text-lg font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          Drag to rotate (Simulated)
        </div>
      </div>

      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 leading-relaxed">
        Immerse yourself in a comprehensive, interactive 360-degree view of complex structures and environments. Ideal for <span class="font-semibold text-electric-blue-600 dark:text-hot-pink-400">detailed study</span> and <span class="font-semibold text-lime-green-600 dark:text-electric-blue-400">enhanced visualization</span>.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-lime-green-500 dark:text-electric-blue-500 flex-shrink-0" 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 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9v-c1.333-3.333-2.667-6.667-7-10"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Interactive Exploration</span>
        </div>
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-electric-blue-500 dark:text-hot-pink-500 flex-shrink-0" 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 3v2m6-2v2M9 19v2m6-2v2M5 7h14a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0a2 2 0 012-2h4a2 2 0 012 2m0 0a2 2 0 012 2v4m-4-2a2 2 0 01-2 2h-4a2 2 0  01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2z"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Enhanced Learning</span>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg sm:text-xl font-bold bg-electric-blue-500 dark:bg-hot-pink-500 text-white shadow-xl hover:shadow-electric-blue-400/50 dark:hover:shadow-hot-pink-400/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-electric-blue-300 dark:focus:ring-hot-pink-300 group relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-r from-lime-green-400 to-electric-blue-600 dark:from-electric-blue-400 dark:to-hot-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse-light"></span>
          <span class="relative z-10">Explore Now</span>
          <svg class="ml-2 w-5 h-5 sm:w-6 sm:h-6 relative z-10" 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>
        </button>
      </div>
    </div>
  </div>

  <style>
    /* Custom colors for neon/electric theme */
    .text-electric-blue-500 {
      color: #00eeff; /* Brighter electric blue */
    }
    .dark .text-electric-blue-500 {
      color: #00eeff;
    }
    .text-hot-pink-500 {
      color: #ff0077; /* Hotter pink */
    }
    .dark .text-hot-pink-500 {
      color: #ff0077;
    }
    .text-lime-green-500 {
      color: #aeff00; /* Vibrant lime green */
    }
    .dark .text-lime-green-500 {
      color: #aeff00;
    }
    .border-electric-blue-400 {
      border-color: #00c0e0;
    }
    .dark .border-hot-pink-400 {
      border-color: #e00060;
    }

    .bg-electric-blue-500 {
      background-color: #00eeff;
    }
    .dark .bg-hot-pink-500 {
      background-color: #ff0077;
    }

    .from-electric-blue-500 {
      --tw-gradient-from: #00eeff var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(0, 238, 255, 0) var(--tw-gradient-to-position);
    }
    .to-lime-green-500 {
      --tw-gradient-to: #aeff00 var(--tw-gradient-to-position);
    }
    .dark .from-hot-pink-500 {
      --tw-gradient-from: #ff0077 var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(255, 0, 119, 0) var(--tw-gradient-to-position);
    }
    .dark .to-electric-blue-500 {
      --tw-gradient-to: #00eeff var(--tw-gradient-to-position);
    }

    .hover\:shadow-electric-blue-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 192, 224, 0.5), 0 4px 6px -2px rgba(0, 192, 224, 0.05);
    }
    .dark .hover\:shadow-hot-pink-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(224, 0, 96, 0.5), 0 4px 6px -2px rgba(224, 0, 96, 0.05);
    }

    @keyframes pulse-light {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.8;
      }
      100% {
        opacity: 0;
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  </style>
</div>

360_Viewer_Component_Brutalism_Grayscale

A complex 360° viewer component designed with a brutalist, grayscale aesthetic for dashboard applications. Features raw, bold contrasts and interactive elements, fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-950 font-mono text-neutral-900 dark:text-neutral-100 transition-colors duration-300">
  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto border-4 border-neutral-900 dark:border-neutral-100 p-4 sm:p-6 lg:p-8 bg-neutral-200 dark:bg-neutral-900 shadow-[8px_8px_0px_2px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_2px_rgba(255,255,255,1)]">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b-4 border-neutral-900 dark:border-neutral-100">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold uppercase leading-none mb-2 sm:mb-0">360° Object <span class="hidden sm:inline">Viewer</span></h1>
      <div class="flex space-x-2">
        <button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Live Feed</button>
        <button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Settings</button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Main Viewer Area -->
      <section class="lg:col-span-2 relative aspect-video bg-neutral-300 dark:bg-neutral-800 border-4 border-neutral-900 dark:border-neutral-100 overflow-hidden shadow-lg p-2 sm:p-4 md:p-6">
        <div class="absolute inset-0 flex items-center justify-center p-4">
          <img src="https://picsum.photos/1200/800?grayscale&random=1" alt="360 object view placeholder" class="w-full h-full object-contain filter grayscale border-2 border-neutral-600 dark:border-neutral-400">
        </div>
        <!-- Overlay Controls -->
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4 bg-neutral-900 dark:bg-neutral-100 bg-opacity-70 dark:bg-opacity-70 text-neutral-100 dark:text-neutral-900 flex justify-between items-center">
          <div class="flex space-x-2 sm:space-x-4">
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Left">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M11 2C6.03 2 2 6.03 2 11h3c0-3.87 3.13-7 7-7s7 3.13 7 7c0 1.93-.78 3.68-2.05 4.95L15.36 12H19v7h-7l2.84-2.84C10.71 18.29 8.91 19 7 19c-3.87 0-7-3.13-7-7c0-3.87 3.13-7 7-7zm-4 4h2v5h5v2h-7zm6 3l-3 3h3zm-3 8h-2v-5h-5v-2h7z" />
              </svg>
            </button>
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Right">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M13 2c4.97 0 9 4.03 9 9h-3c0-3.87-3.13-7-7-7s-7 3.13-7 7c0 1.93.78 3.68 2.05 4.95L8.64 12H5v7h7l-2.84-2.84C13.29 18.29 15.09 19 17 19c3.87 0 7-3.13 7-7c0-3.87-3.13-7-7-7zm4 4h-2v5h-5v2h7zm-6 3l3 3h-3zm3 8h2v-5h5v-2h-7z" />
              </svg>
            </button>
          </div>
          <div class="flex space-x-2 sm:space-x-4">
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Toggle Fullscreen">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M5 5h5v2H7v3H5zm14 0h-5v2h3v3h2zm-5 14h5v-2h-3v-3h-2zm-7 0H5v-2h3v-3h2z" />
              </svg>
            </button>
          </div>
        </div>
      </section>

      <!-- Side Panel: Stats & Controls -->
      <aside class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6 sm:gap-8">
        <!-- Object Details -->
        <section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
          <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Object Info</h2>
          <dl class="text-sm sm:text-base">
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">ID:</dt>
              <dd>OBJ-734X</dd>
            </div>
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">Type:</dt>
              <dd>Heavy Unit</dd>
            </div>
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">Status:</dt>
              <dd class="text-green-700 dark:text-green-400 font-bold">ONLINE</dd>
            </div>
            <div class="flex justify-between py-1">
              <dt class="font-bold">Last Scan:</dt>
              <dd>2023-10-27 14:30 UTC</dd>
            </div>
          </dl>
        </section>

        <!-- Control Panel -->
        <section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
          <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Actions</h2>
          <div class="grid grid-cols-1 gap-4">
            <button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-neutral-500 dark:hover:bg-neutral-500 transition-colors duration-200 shadow-md">Initiate Scan</button>
            <button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-negative-700 transition-colors duration-200 shadow-md">Deactivate Unit</button>
            <select class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 appearance-none shadow-md">
              <option>Select View Mode</option>
              <option>Wireframe</option>
              <option>Thermal</option>
              <option>X-Ray</option>
            </select>
          </div>
        </section>
      </aside>
    </div>

    <!-- Activity Log / Footer -->
    <section class="mt-8 p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
      <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Recent Activity</h2>
      <div class="space-y-2 text-sm sm:text-base max-h-48 overflow-y-auto pr-2">
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:35:01]</span> <span class="font-bold">SYSTEM:</span> User 'JOHN.DOE' requested full scan.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:34:20]</span> <span class="font-bold">ALERT:</span> Environmental anomaly detected. Severity LOW.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:30:00]</span> <span class="font-bold">REPORT:</span> Scan 'OBJ-734X' completed. No critical deviations.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:29:15]</span> <span class="font-bold">SYSTEM:</span> Object 'OBJ-734X' power cycle initiated.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:28:50]</span> <span class="font-bold">USER:</span> 'JANE.SMITH' logged in from Console 03.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:27:05]</span> <span class="font-bold">SYSTEM:</span> Module 'ALPHA-01' diagnostics complete. OK.</p>
      </div>
    </section>

    <!-- Dark Mode Toggle (Conceptual - outside core component) -->
    <div class="absolute top-4 right-4">
      <button class="px-3 py-2 text-sm font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
    </div>

  </div>
</div>

360_viewer_component

A complex, responsive 360° viewer component with cyberpunk and autumn color aesthetics, designed for educational platforms. It features dark mode support, interactive elements, and rich typography.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-900 text-orange-200 min-h-screen font-sans antialiased dark:bg-gray-950 dark:text-orange-100">

  <!-- Component Container -->
  <div class="max-w-7xl mx-auto bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-orange-600/30 dark:bg-gray-900 dark:border-orange-700/40">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Left Panel: 360 Viewer Placeholder & Controls -->
      <div class="lg:col-span-2 space-y-6">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-400 tracking-tight leading-tight uppercase relative drop-shadow-lg">
          <span class="relative z-10">Cybernetic Flora: Mycelial Network</span>
          <span class="absolute inset-y-0 left-0 w-full h-full bg-orange-600 mix-blend-multiply opacity-10 rounded-lg blur-sm"></span>
        </h2>
        <p class="text-sm text-orange-300/80 font-mono tracking-widest uppercase">Lesson ID: NWRK-734-ALPHA</p>

        <!-- 360 Viewer Area -->
        <div class="relative w-full h-96 sm:h-[500px] bg-gray-950 rounded-lg overflow-hidden border border-orange-700 shadow-inner shadow-orange-900/30 group">
          <img src="https://picsum.photos/1200/800?grayscale&blur=5" alt="360 Degree View of Mycelial Network" class="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:opacity-40 transition-opacity duration-300">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-32 h-32 bg-orange-700 rounded-full flex items-center justify-center animate-pulse-slow border-2 border-orange-500 shadow-lg shadow-orange-500/50">
              <svg class="w-16 h-16 text-orange-300" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              </svg>
            </div>
            <p class="absolute bottom-8 text-orange-500 text-lg font-bold drop-shadow-md">360° INTERACTIVE VIEW</p>
          </div>
          <!-- Overlay for VR/AR indicators -->
          <div class="absolute top-4 right-4 bg-orange-800/60 text-orange-200 text-xs px-3 py-1 rounded-full flex items-center gap-1 backdrop-blur-sm shadow-md">
            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1.5l-6 10.5 6 10.5 6-10.5zM12 4.14l-3.46 6.01L12 16.15l3.46-6.01z"/></svg>
            VR/AR Compatible
          </div>
        </div>

        <!-- Playback Controls -->
        <div class="flex flex-wrap items-center justify-center gap-4 bg-gray-700/60 p-4 rounded-lg border border-orange-800/50 dark:bg-gray-800/70">
          <button class="flex items-center space-x-2 text-orange-300 hover:text-orange-100 bg-orange-900/40 px-4 py-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            <span>Play</span>
          </button>
          <button class="flex items-center space-x-2 text-orange-300 hover:text-orange-100 bg-orange-900/40 px-4 py-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
              <span>Pause</span>
            </button>
          <div class="flex-grow h-2 bg-orange-900 rounded-full cursor-pointer group">
            <div class="w-1/2 h-full bg-orange-500 rounded-full relative group-hover:bg-orange-400 transition-colors duration-200">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-orange-300 rounded-full border-2 border-orange-100 group-hover:scale-125 transition-transform duration-200 shadow-lg"></div>
            </div>
          </div>
          <span class="text-orange-400 text-sm font-mono">01:23 / 03:45</span>
          <button class="text-orange-300 hover:text-orange-100 bg-orange-900/40 p-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
          </button>
          <button class="text-orange-300 hover:text-orange-100 bg-orange-900/40 p-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v4h2v-4zm-4 0H5v6h10v-6zM3 4c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H3zm0 15V5h18l.01 14H3z"/></svg>
          </button>
        </div>
      </div>

      <!-- Right Panel: Information & Interactions -->
      <div class="space-y-6 lg:space-y-8">
        <!-- Description/Synopsis -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 space-y-3 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide">Overview Protocol</h3>
          <p class="text-sm text-orange-200/90 leading-relaxed">
            Explore the intricate bio-electrical pathways of the <span class="text-orange-400 font-semibold">Symbiotic Mycelial Network</span>. This interactive module details its energy transfer mechanisms, defensive protocols, and potential applications in bio-engineering. Navigate the 3D model to uncover hidden <span class="text-orange-400 font-semibold">anomalies</span> and <span class="text-orange-400 font-semibold">data nodes</span>.
          </p>
          <div class="flex flex-wrap gap-2 text-xs font-mono pt-2">
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#BIO-CYBER</span>
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#NEURAL-NET</span>
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#EDUCATIONAL</span>
          </div>
        </section>

        <!-- Hotspots/Interactive Elements -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 space-y-4 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide">Data Nodes & Anomalies</h3>
          <ul class="space-y-3">
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Anomaly A-1: Energetic Signature Spike</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+20XP</span>
            </li>
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-teal-500 rounded-full"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Data Node B-4: Mycelial Transport</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+15XP</span>
            </li>
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-purple-500 rounded-full"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Hotspot C-7: Biomass Conversion</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+10XP</span>
            </li>
          </ul>
        </section>

        <!-- User/Instructor Info -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide mb-4">Instructor Profile</h3>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Instructor Avatar" class="w-16 h-16 rounded-full border-2 border-orange-500 shadow-md shadow-orange-700/50">
            <div>
              <h4 class="text-lg font-bold text-orange-300">Dr. Elias Thorne</h4>
              <p class="text-sm text-orange-400 font-mono tracking-wide">Bio-Cybernetics Specialist</p>
              <a href="#" class="text-xs text-orange-500 hover:underline mt-1 inline-block">View His Courses <span class="transform rotate-45 inline-block ml-1">⟶</span></a>
            </div>
          </div>
          <p class="text-sm text-orange-200/90 mt-4 leading-relaxed">Dr. Thorne is a leading authority on synthetic biology and neural integration. His research focuses on sustainable bio-computational systems for post-collapse environments.</p>
        </section>
      </div>

    </div>
  </div>

  <!-- Footer/Credits (Optional, but adds to the theme) -->
  <footer class="mt-8 text-center text-xs text-orange-400/50">
    <p>© 2077 Axiom Educational Network. All Rights Reserved. // Unauthorized access detected: Neural trace established.</p>
  </footer>

</div>

360_viewer_component_sports_grayscale

A simple, responsive 360° viewer component for sports/fitness applications, featuring a watercolor/artistic style with a grayscale color scheme and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-4xl bg-white dark:bg-gray-700 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105 p-6 sm:p-8 md:p-10">
    <!-- Artistic Overlay Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <div class="absolute top-0 left-0 w-2/3 h-2/3 bg-gray-400 dark:bg-gray-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform -translate-x-1/4 -translate-y-1/4"></div>
      <div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-gray-300 dark:bg-gray-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform translate-x-1/4 translate-y-1/4"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 text-gray-800 dark:text-gray-100 leading-tight">
        <span class="block">Athlete 360° View</span>
        <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-300">Deep Dive into Performance</span>
      </h2>
      <p class="mb-8 text-gray-600 dark:text-gray-300 text-sm sm:text-base max-w-2xl mx-auto">
        Explore every angle of their technique and form. Pinch, drag, and zoom for an immersive experience.
      </p>

      <div class="relative w-full aspect-video bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden shadow-inner border border-gray-300 dark:border-gray-600 mb-6 group">
        <img src="https://picsum.photos/800/450?random=1" alt="360 view placeholder" class="w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-80">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80 p-4 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
            <svg class="h-10 w-10 text-gray-700 dark:text-gray-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              <path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="flex flex-wrap justify-center gap-4 text-sm">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 6h2v8h-2zm0 10h2v2h-2z"/>
          </svg>
          More Details
        </a>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
          View Analysis
        </a>
      </div>
    </div>
  </div>
</div>

360_viewer_component

A complex 360° product viewer component with microinteractions, a purple/violet color scheme, and dark mode support, suitable for business/corporate websites.

Open Preview

                
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 lg:grid-cols-2 min-h-[400px]">

      <!-- Left Section: 360 Viewer Area -->
      <div class="relative bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 flex items-center justify-center p-4 min-h-[300px]">
        <div class="absolute inset-0 bg-contain bg-center bg-no-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.svgrepo.com/show/511397/sphere-3d-rotate.svg');"></div>

        <!-- Main 360 Image Placeholder -->
        <div class="relative w-full max-w-lg aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden border border-purple-300 dark:border-purple-600 shadow-lg group">
          <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">

          <!-- Interactive Overlay - Mimics Rotation -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-30 dark:bg-opacity-50">
            <p class="text-white text-lg sm:text-xl font-bold tracking-wide animate-pulse">Rotate 360°</p>
          </div>

          <!-- Rotation Indicator -->
          <div class="absolute right-2 bottom-2 text-white bg-purple-600 dark:bg-purple-800 px-2 py-1 rounded-full text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
            Drag to spin
          </div>
        </div>

        <!-- Controls Placeholder -->
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
          <button aria-label="Previous View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Next View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Interaction -->
      <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-3 leading-tight">
            Quantum 5000
          </h2>
          <p class="text-purple-600 dark:text-purple-400 font-semibold text-lg sm:text-xl mb-4">
            Next-Gen Interstellar Hub
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
            Explore the future with the Quantum 5000. Its innovative design and advanced features provide an unparalleled experience for any corporate venture. Precision engineering meets limitless possibilities.
          </p>

          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Key Features:</h3>
            <ul class="space-y-2 text-gray-600 dark:text-gray-400 text-sm sm:text-base">
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Enhanced Modular Design</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">AI-Powered Decision Matrix</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Galactic Connectivity Protocol</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Call to Action / Pricing -->
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mt-6 gap-4">
          <div class="sm:text-right text-gray-900 dark:text-white">
            <p class="text-sm text-gray-500 dark:text-gray-400">Starting from</p>
            <p class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400">$7,999<span class="text-xl font-normal">/unit</span></p>
          </div>
          <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 15.422 4.26 16 5 16h11a1 1 0 100-2H5l1-1h10a1 1 0 00.894-.553l3-6A1 1 0 0019 4H9.68L8.174 1.67A1 1 0 007.05 1H3zM6 17a2 2 0 11-4 0 2 2 0 014 0zM16 17a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Request a Demo
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

360° Viewer