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

カードコンポーネント

ブルータリズムのデザインスタイルを採用したレスポンシブポートフォリオカードコンポーネントで、パステルカラーの配色と適度な複雑さ、インタラクティブ機能を活用しています。このカードは、作品や製品を紹介し、ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

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

開ける