CCHub Logo CCHub Tailwind Collection
コンポーネント データ視覚化コンポーネント データ視覚化コンポーネント

データ視覚化コンポーネント

パステルカラーの配色でマテリアルデザインスタイルでデザインされたレスポンシブデータ視覚化コンポーネントで、ダークモードをサポートするポートフォリオ作品の展示に適しています。

プレビュー

HTMLコード 

<div class="max-w-4xl mx-auto p-4">
    <h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

データ視覚化コンポーネント

アースカラーとシンプルなレイアウトを特徴とするダークテーマを備えたレトロなビンテージスタイルのデータ視覚化ダッシュボードコンポーネント。

開ける

データ視覚化コンポーネント

ダークテーマをサポートするポートフォリオ用のNeumorphismスタイルのデータ視覚化コンポーネント

開ける

ダークモードデータ視覚化コンポーネント

ダークなモノクロテーマで設計された、複雑で応答性の高いデータ視覚化コンポーネント。折れ線グラフ、棒グラフ、データ カードなど、複数の対話型視覚化要素を備えています。ホバー効果が含まれ、Tailwindのダークモードサポートを使用します。ブログやコンテンツ消費プラットフォームに適しています。

開ける