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

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

ブルータリズムスタイルの360°ビューアコンポーネントで、回転する画像を生の大胆なデザインで紹介し、レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
    <h1 class="text-4xl font-bold mb-4">360° Viewer</h1>
    <div class="relative w-full max-w-3xl h-96 bg-gray-800 border-4 border-white rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/800/600" alt="360° view" class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-700 ease-in-out hover:rotate-12 hover:scale-105"/>
        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-2xl font-semibold">View from all angles</h2>
            <p class="text-sm">Hover to rotate the view</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white" />
        <p class="mt-2">Created by: John Doe</p>
    </div>
</div>

関連コンポーネント

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

ニューモーフィズムデザイン、トライアドカラースキーム(例:ライトブルー、ピンク、イエローオレンジ)、ソーシャルメディアアプリケーション向けの適度な複雑さを備えた360°ビューアコンポーネント。このコンポーネントはレスポンシブで、Tailwind クラスを使用したダーク モードをサポートし、画像には picsum.photos を使用し、アバターには randomuser.me を使用します。JavaScriptは必要ありません。

開ける

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

Glassmorphismスタイルとパステルカラースキームで設計されたシンプルなレスポンシブ360°ビューアコンポーネントで、ダークモードのサポートを含むブログコンテンツ消費用です。

開ける

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

マテリアルデザインにインスパイアされた360°ビューアコンポーネントは、作品や製品を紹介するための鮮やかな色で、レスポンシブデザインとダークモードをサポートしています。

開ける