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

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

ダークモードをサポートし、レスポンシブデザインを備えた360°ビューアコンポーネントで、Tailwind CSSで構築されています。JavaScript は不要で、スタイルと応答性に CSS のみを使用します。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="container px-4">
    <div class="relative w-full max-w-lg mx-auto">
      </div>
    </div>
  </div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

レスポンシブデザインとTailwind CSSを使用したダークテーマをサポートする360°ビューアコンポーネント。アニメーションとインタラクションにCSSを使用して、マイクロインタラクションの感触を実現します。JavaScript はありません。

開ける