Neumorphic 360 ビューアコンポーネント
ニューモーフィズムデザイン、トライアドカラースキーム(例:ライトブルー、ピンク、イエローオレンジ)、ソーシャルメディアアプリケーション向けの適度な複雑さを備えた360°ビューアコンポーネント。このコンポーネントはレスポンシブで、Tailwind クラスを使用したダーク モードをサポートし、画像には picsum.photos を使用し、アバターには randomuser.me を使用します。JavaScriptは必要ありません。
HTMLコード
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<!-- Neumorphic Container -->
<div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">
<!-- 360 Viewer Placeholder (using an image for demonstration) -->
<!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
<div class="relative w-full h-64 rounded-lg overflow-hidden
shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
<img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
<!-- Example Triadic Colors for potential UI elements layered over the image -->
<div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
<div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
</div>
<!-- Component Title -->
<div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
Interactive 360° View
</div>
<!-- User Avatar and Info -->
<div class="flex items-center justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
<div class="ml-3 text-gray-600 dark:text-gray-400">
<p class="font-medium">John Doe</p>
<p class="text-sm">Exploring the view</p>
</div>
</div>
<!-- Interactive Buttons Placeholder -->
<div class="flex justify-around mt-6">
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
text-gray-700 dark:text-gray-300 hover:shadow-inner
dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
transition duration-200">
<!-- Example Icon - Replace with a real icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</button>
</div>
</div>
</div>関連コンポーネント
360 ビューア コンポーネント
Glassmorphism デザイン、単色の配色、適度な複雑さを備えた 360 度ビューア コンポーネント。ブログ/コンテンツ用に設計されており、レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。JavaScript は含まれておらず、Tailwind クラスを含む HTML のみが含まれています。画像には picsum.photos を使用します。
360°ビューアコンポーネント
グレースケールの配色を利用したスキューモーフィックスタイルでデザインされた360°ビューアコンポーネント。ソーシャルメディアアプリケーションに適した中程度の複雑さのインターフェイスを備えており、明るいテーマと暗いテーマの両方をサポートします。