検索コンポーネント

カテゴリ

360°ビューア

360度の画像や動画のインタラクティブビューア

360_Viewer_Component

不動産プラットフォーム向けの複雑な360度プロパティビューアコンポーネントで、モノスペース/デベロッパーデザイン、レトロ/ビンテージカラーパレット、ダークモードサポートによる完全な応答性を備えています。

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

360_viewer_component

パープル/バイオレットの配色を使用した工業的で生々しい美学を備えた複雑な360°製品ビューアコンポーネントで、ポートフォリオに適しています。インタラクティブ要素、レスポンシブデザイン、ダークモードのサポートを備えています。

開けるプレビュー

                <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

ファッション/ビューティーのための複雑で活気に満ちたスキューモーフィックな360度製品ビューアコンポーネントで、ダークモードをサポートし、完全にレスポンシブです。

開けるプレビュー

                <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

エンターテインメント/メディアプラットフォーム向けに設計された複雑な360°製品ビューアコンポーネントで、カラーグラデーションを多用し、温かみのあるニュートラルカラースキーム内でのスムーズなトランジションを特徴としています。完全にレスポンシブで、ダークモードをサポートしています。

開けるプレビュー

                <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

レトロなテーマのシンプルな e コマース向け 360 度ビューアコンポーネントで、レインボーグラデーション、レスポンシブデザイン、ダークモードのサポートが特徴です。80年代/90年代のノスタルジアを呼び起こすように設計されています。

開けるプレビュー

                <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

教育プラットフォーム向けに設計されたシンプルでミニマリストの360ビューアコンポーネントで、明るいネオン/エレクトリックカラーと強力なタイポグラフィが特徴で、完全な応答性とダークモードがサポートされています。

開けるプレビュー

                <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

ダッシュボードアプリケーション向けに残忍なグレースケールの美学で設計された複雑な360°ビューアコンポーネント。生々しく大胆なコントラストとインタラクティブな要素を備えており、ダークモードのサポートにより完全にレスポンシブです。

開けるプレビュー

                <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

サイバーパンクと秋の色の美学を備えた、教育プラットフォーム向けに設計された、複雑で応答性の高い360°ビューアコンポーネント。ダークモードのサポート、インタラクティブな要素、豊富なタイポグラフィが特徴です。

開けるプレビュー

                <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

スポーツ/フィットネスアプリケーション向けのシンプルでレスポンシブな360°ビューアコンポーネントで、グレースケールの配色とダークモードをサポートする水彩/芸術的なスタイルが特徴です。

開けるプレビュー

                <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

マイクロインタラクション、紫/紫の配色、ダークモードのサポートを備えた複雑な360°製品ビューアコンポーネントで、ビジネス/企業のWebサイトに適しています。

開けるプレビュー

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