CCHub Logo CCHub Tailwind Collection
구성 요소 대시보드 레트로 비즈니스 대시보드

레트로 비즈니스 대시보드

비즈니스/기업 웹 사이트를 위한 레트로/빈티지 그레이스케일 대시보드 구성 요소로, 중간 정도의 복잡성과 반응이 빠른 디자인을 갖추고 있습니다. 스타일링을 위해 Tailwind CSS dark: 접두사를 사용하여 어두운 테마를 지원합니다. 이미지는 picsum.photos에서 가져왔으며 아바타는 randomuser.me 에서 가져왔습니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-sans min-h-screen p-8">
    <div class="container mx-auto">
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Dashboard</h1>
            <div class="flex items-center space-x-4">
                <input type="text" placeholder="Search..." class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            </div>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Sales Overview</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
                <ul class="space-y-2">
                    <li class="flex justify-between"><span>New Order</span><span>$250</span></li>
                    <li class="flex justify-between"><span>Product View</span><span>Widget X</span></li>
                    <li class="flex justify-between"><span>User Login</span><span>Admin</span></li>
                </ul>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Traffic Sources</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 md:col-span-2 lg:col-span-3">
                <h2 class="text-xl font-semibold mb-4">Performance Metrics</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <h3 class="text-lg">Revenue</h3>
                        <p class="text-2xl font-bold">$12,345</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Visitors</h3>
                        <p class="text-2xl font-bold">5,678</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Orders</h3>
                        <p class="text-2xl font-bold">901</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Conversion</h3>
                        <p class="text-2xl font-bold">10.5%</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

관련 구성 요소

Dashboards 구성 요소

포트폴리오 표시를 위해 설계된 간단하고 반응이 빠른 대시보드 구성 요소로, 마이크로 인터랙션을 통해 흙색에 초점을 맞춥니다. Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

Dashboards 구성 요소

반응형 효과와 어두운 테마 지원이 포함된 플랫 디자인을 보여주는 미니멀한 대시보드 구성 요소로, Tailwind CSS를 사용하여 구축되었습니다.

열다

Dashboards 구성 요소

Tailwind CSS를 사용하여 구축된 마이크로 인터랙션과 트라이어딕 색 구성표를 특징으로 하는 소셜 미디어 애플리케이션을 위한 반응형 대시보드 구성 요소입니다.

열다