CCHub Logo CCHub Tailwind Collection
コンポーネント カード スキューモーフィック カード コンポーネント

スキューモーフィック カード コンポーネント

スキューモーフィックなスタイルでデザインされたシンプルなカードコンポーネントで、読み取りとコンテンツの消費に類似の配色を使用しています。このコンポーネントはレスポンシブで、ダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

Crypto_Blockchain_Cards_Component

暗号通貨およびブロックチェーンアプリケーション向けに設計されたレスポンシブカードのセットで、温かみのあるニュートラルな配色、マテリアルにインスパイアされたシャドウ、ダークモードのサポートが特徴です。

開ける

Music_Cards_Component

ジュエルトーンの豊かなグラデーションとスムーズなトランジションが特徴のレスポンシブミュージック/オーディオカードコンポーネントで、ダークモードにも対応しています。アルバムやトラックの表示のためのシンプルなレイアウト。

開ける

スキューモーフィズム カード コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブな Skeuomorphism スタイルのカードコンポーネント。プレースホルダー画像とアバターが含まれています。

開ける