CCHub Logo CCHub Tailwind Collection
コンポーネント ダッシュ ボード ダッシュボードコンポーネント

ダッシュボードコンポーネント

ポートフォリオの展示用に設計されたシンプルで応答性の高いダッシュボードコンポーネントで、マイクロインタラクションを使用し、アースカラーに焦点を当てています。Tailwind CSSを使用したダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
        <p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
    </footer>
</div>

関連コンポーネント

暗号通貨ダッシュボードコンポーネント

スイス/インターナショナルタイポグラフィのデザインスタイルを備えた複雑でレスポンシブな暗号通貨ダッシュボードコンポーネントで、マルチカラーグラデーション要素とダークモードのサポートが特徴です。ポートフォリオの概要、市場動向、最近の取引、チャートなど、複数のセクションが含まれています。

開ける

ダッシュボードコンポーネント

Tailwind CSSを使用して構築された、レスポンシブエフェクトとダークテーマのサポートを備えたフラットデザインを紹介するミニマリストのダッシュボードコンポーネント。

開ける

ダッシュボードコンポーネント

ポートフォリオ用のシンプルなモノクロ ダーク モード ダッシュボード コンポーネントで、Tailwind CSS で構築されています。レスポンシブデザインが特徴で、単色のさまざまな色合いを使用して、なめらかでミニマルな外観になっています。

開ける