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

Dashboards 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-teal-400 dark:bg-teal-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://picsum.photos/50/50" alt="Profile" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Check how users interact with your posts.</p>
            </div>
        </div>
        <div class="bg-orange-400 dark:bg-orange-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Followers</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">See your growth in followers over time.</p>
            </div>
        </div>
        <div class="bg-purple-400 dark:bg-purple-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Post Performance</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Evaluate the performance of your latest posts.</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Luxury Agriculture Dashboard 구성 요소

농업 및 농업 웹 사이트를 위한 우아하고 정교한 대시보드 구성 요소로, 생생한 에메랄드 액센트가 있는 흑백 색 구성표를 특징으로 합니다. 여기에는 주요 메트릭, 최근 활동 및 대화형 요소가 포함되며, 완전히 반응하고 다크 모드를 지원하도록 설계되었습니다.

열다

Brutalist_Dating_Dashboard

데이트 및 소셜 플랫폼을 위한 브루탈리즘 스타일의 대시보드 구성 요소로, 대담한 디자인, 높은 대비, 보라색/보라색 색 구성표가 특징입니다. 다크 모드 지원으로 반응형.

열다

레트로 비즈니스 대시보드

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

열다