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

Dashboards 구성 요소

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

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
        <p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
    </footer>
</div>

관련 구성 요소

Dashboards 구성 요소

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

열다

Neumorphic_Forum_Dashboard

포레스트/그린 색상 팔레트가 있는 간단하고 반응이 빠른 뉴모픽 대시보드 구성 요소로, 포럼 및 커뮤니티 플랫폼용으로 설계되었으며 다크 모드 지원이 포함되어 있습니다.

열다

Brutalist_Dating_Dashboard

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

열다