CCHub Logo CCHub Tailwind Collection
コンポーネント カード ダークモードソーシャルカード

ダークモードソーシャルカード

アースカラーのダークモード用にスタイリングされたレスポンシブカードコンポーネントで、ソーシャルメディアインターフェイス用に設計されています。

プレビュー

HTMLコード 

<div class="max-w-sm mx-auto p-4">
  <div class="bg-gray-800 rounded-lg shadow-lg dark:bg-gray-900">
    <img class="rounded-t-lg" src="https://picsum.photos/400/200" alt="Card image cap">
    <div class="p-4">
      <div class="flex items-center">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-4">
          <h2 class="text-lg font-bold text-gray-300 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
      </div>
      <p class="mt-2 text-gray-300 dark:text-gray-200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut libero et neque vehicula porta.
      </p>
      <div class="flex justify-between mt-4">
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Like</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Comment</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Share</button>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

Glassmorphism カード コンポーネント

鮮やかな色のGlassmorphismカードコンポーネント。ダークテーマをサポートするレスポンシブデザイン。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

開ける

カードコンポーネント

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

開ける

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

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

開ける