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

Dashboards 구성 요소

3D 요소와 어스 톤으로 설계된 반응형 대시보드 구성 요소로, 어두운 테마를 지원하는 데이터 시각화 및 제어판을 보여줍니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
    <div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Card 1 -->
            <div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
                    <p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
                </div>
            </div>
            <!-- Card 2 -->
            <div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
                    <p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
                </div>
            </div>
            <!-- Card 3 -->
            <div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
                </div>
            </div>
            <!-- Card 4 -->
            <div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
                </div>
            </div>
        </div>
        <div class="mt-6">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
                <ul class="space-y-4">
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

소셜 미디어 대시보드

Tailwind CSS를 사용하여 마이크로 인터랙션, 보색 구성표, 적당한 복잡성 및 어두운 테마를 지원하는 반응형 소셜 미디어 대시보드 구성 요소입니다. randomuser.me 의 아바타가 포함된 사용자 프로필과 picsum.photos의 이미지가 포함된 피드가 포함됩니다.

열다

Dashboards 구성 요소

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

열다

Dashboards 구성 요소

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

열다