CCHub Logo CCHub Tailwind Collection
コンポーネント カード カードコンポーネント

カードコンポーネント

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

プレビュー

HTMLコード 

<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
    </div>
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="text-gray-800 dark:text-gray-200">
            <p class="font-semibold">Author Name</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
        </div>
    </div>
</div>

関連コンポーネント

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

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

開ける

3D カード コンポーネント

ダッシュボードに適した、3Dデザインスタイル、鮮やかな色、複数のインタラクティブ要素を備えたレスポンシブカードコンポーネント。Tailwindのダークプレフィックスを使用したダークモードをサポートします。

開ける

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

Skeuomorphismに触発された次のカードコンポーネントは、ダークテーマのサポートにより完全にレスポンシブです。ダークモードの場合、CSSのサポートで十分です。JavaScriptは必要ありません。

開ける