CCHub Logo CCHub Tailwind Collection
コンポーネント 機能コンポーネント 機能コンポーネントコンポーネント

機能コンポーネントコンポーネント

現実世界の対応物を模倣した Web コンポーネントで、補完的な配色、シンプルなレイアウト、ダークモードをサポートするレスポンシブデザインを備えたビジネス企業スタイル。

プレビュー

HTMLコード 

<div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

関連コンポーネント

機能コンポーネントコンポーネント

Tailwind CSS を使用した、レスポンシブ効果とダーク テーマのサポートを備えた glassmorphism デザイン スタイルを特徴とするコンポーネント。

開ける

ゲーム機能のハイライト

レスポンシブ ゲーム機能は、タイポグラフィとグリッド システムを強調したすっきりとしたミニマリスト デザインで、温かみのあるニュートラルを使用し、ダーク モードをサポートするコンポーネントを強調します。大きな画像、タイトル、説明、アクションボタンが特徴です。

開ける

マイクロインタラクションを備えたEコマース製品カード

トライアドの配色と、カートや好みに追加するためのマイクロインタラクション要素を備えたシンプルなeコマース製品カードで、応答性とダークモードのサポートが特徴です。

開ける