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>

関連コンポーネント

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

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

開ける

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

Tailwind CSSでデザインされたミニマリストポートフォリオコンポーネントで、鮮やかな配色が特徴で、ダークモードをサポートしています。このコンポーネントは、作品や製品を紹介することを目的としており、画像やアバターのプレースホルダーが含まれています。

開ける

Glassmorphicミュージックプレーヤーのコントロール

セピア/ブラウンの色調のガラスモルフィック音楽プレーヤー制御コンポーネントで、すりガラスのような半透明の要素とぼかし効果が特徴です。レスポンシブで、ダークモードをサポートし、音楽ストリーミングやオーディオプラットフォームに適しています。

開ける