CCHub Logo CCHub Tailwind Collection
コンポーネント 360°ビューア 360°ビューアコンポーネント

360°ビューアコンポーネント

シンプルな 360° ビューア コンポーネントで、マテリアル デザインでスタイル設定され、e コマースのコンテキストに適しています。ダークモードをサポートするレスポンシブデザインが含まれており、picsum.photosの画像と randomuser.me のアバターが表示されます。

プレビュー

HTMLコード 

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

関連コンポーネント

360°ビューアコンポーネント

Glassmorphismスタイルの360°ビューアコンポーネントで、すりガラスのような半透明の要素とぼかし効果が特徴で、レスポンシブデザインとダークテーマをサポートします。

開ける

360_viewer_industrial_finance

インダストリアルで生々しい美学とグラデーションのレインボーカラースキームを備えた、シンプルでレスポンシブな360°ビューアコンポーネントで、金融および銀行のインターフェース向けに設計されています。ダークモードのサポートが含まれています。

開ける

PastelBrutalist360アセットビューア

ブルータリズムのデザインスタイルとパステルピンクの配色を備えた、シンプルでレスポンシブな360°アセットビューアコンポーネント。ダッシュボード用に調整されており、静止画像プレースホルダー(360°ビューをシミュレート)、機能しないコントロールボタン、および情報表示を備えています。Tailwind CSSで構築され、ダークモードをサポートし、太い境界線とハードオフセットシャドウで生々しく大胆な美学を示しています。

開ける