CCHub Logo CCHub Tailwind Collection
コンポーネント カード マテリアルデザインカード

マテリアルデザインカード

レスポンシブ動作と Tailwind CSS を使用したダーク モードのサポートを備えたマテリアル デザイン スタイルのカード コンポーネント。標高と波紋の効果、視覚的な手がかりが特徴です。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
    <div class="px-6 py-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
    </div>
    <div class="px-6 py-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
      <button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
    </div>
  </div>
</div>

関連コンポーネント

カードコンポーネント

スキューモーフィックなスタイルとアースカラーでデザインされたレスポンシブなブログ/コンテンツカードコンポーネント。タイトル、画像、簡単な説明、著者情報のアバターが含まれています。ダークモードをサポートします。

開ける

Forum_Community_Cards_Component

フォーラムやコミュニティプラットフォーム向けのレスポンシブでインタラクティブなカードコンポーネントで、レトロ/ビンテージの配色とマイクロインタラクションのための微妙なホバー効果が特徴です。ダークモードのサポートとセマンティックHTMLが含まれています。

開ける

バウハウスウェザーカードコンポーネント

バウハウスのデザイン原則にインスパイアされたシンプルでレスポンシブなウェザー/クライメートカードコンポーネントで、幾何学的なフォルムとトライアドカラースキームが特徴です。ダークモードのサポートが含まれています。

開ける