CCHub Logo CCHub Tailwind Collection
구성 요소 대시보드 Dashboards 구성 요소

Dashboards 구성 요소

비즈니스/기업용으로 단색 색 구성표가 있는 다크 모드용으로 설계된 복잡한 대시보드 구성 요소입니다. 풍부한 대화형 요소를 특징으로 하며 반응형입니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
    <header class="bg-gray-800 p-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold">Dashboard</h1>
        <nav class="flex space-x-4">
            <a href="#" class="hover:underline">Home</a>
            <a href="#" class="hover:underline">Reports</a>
            <a href="#" class="hover:underline">Settings</a>
        </nav>
    </header>

    <main class="flex-1 p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Overview</h2>
            <img src="https://picsum.photos/400/200" alt="Overview Image" class="rounded-lg mb-2" />
            <p class="text-sm">Quick insights into the company metrics.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Stats</h2>
            <img src="https://picsum.photos/400/200?random=1" alt="Stats Image" class="rounded-lg mb-2" />
            <p class="text-sm">Detailed statistics overview.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Team</h2>
            <div class="flex flex-wrap">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
             </div>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Sales</h2>
            <img src="https://picsum.photos/400/200?random=2" alt="Sales Image" class="rounded-lg mb-2" />
            <p class="text-sm">Current sales metrics and trends.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Notifications</h2>
            <ul class="list-disc pl-5">
                <li class="text-sm">New project updates</li>
                <li class="text-sm">User feedback received</li>
                <li class="text-sm">System maintenance scheduled</li>
            </ul>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Activities</h2>
            <p class="text-sm">Recent team activities will be displayed here.</p>
        </div>
    </main>

    <footer class="bg-gray-800 p-4 text-center">
        <p class="text-sm">&copy; 2023 Your Company. All Rights Reserved.</p>
    </footer>
</div>

관련 구성 요소

Cryptocurrency Dashboard 구성 요소

스위스/국제 타이포그래피 디자인 스타일을 갖춘 복잡하고 반응이 빠른 암호화폐 대시보드 구성 요소로, 멀티 컬러 그라디언트 요소와 다크 모드 지원을 특징으로 합니다. 여기에는 포트폴리오 개요, 시장 동향, 최근 거래 및 차트와 같은 여러 섹션이 포함됩니다.

열다

아르데코 소셜 대시보드

데이트/소셜 플랫폼을 위한 중간 정도의 복잡성 대시보드 구성 요소로, 차분한/채도가 낮은 색상과 완전한 반응성을 갖춘 아르데코 디자인 스타일을 특징으로 합니다. 프로필 카드, 활동 피드 및 탐색이 포함되며 다크 모드가 지원됩니다.

열다

Dashboards 구성 요소

포트폴리오를 위한 간단한 단색 다크 모드 대시보드 구성 요소로, Tailwind CSS로 구축되었습니다. 반응형 디자인이 특징이며 매끄럽고 미니멀한 룩을 위해 단일 색상의 다양한 음영을 사용합니다.

열다