CCHub Logo CCHub Tailwind Collection
구성 요소 기능적 구성 요소 Functional Components 대시보드

Functional Components 대시보드

Material Design 원칙과 단색 색 구성표로 설계된 반응형 대시보드 구성 요소입니다. 그리드 기반 레이아웃, 대화형 요소 및 Tailwind CSS를 사용한 어두운 테마 지원이 특징입니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
            <img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
            <img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
            <img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
            <p class="text-gray-600 dark:text-gray-400">User Name</p>
            <p class="text-gray-500 dark:text-gray-500">User Email</p>
        </div>
    </div>
</div>

관련 구성 요소

Functional Components 구성 요소

Tailwind CSS로 디자인된 미니멀리스트 포트폴리오 구성 요소로, 생생한 색 구성표와 다크 모드를 지원합니다. 이 구성 요소는 작품 또는 제품을 보여주기 위한 것이며 이미지 및 아바타 자리 표시자를 포함합니다.

열다

Functional Components 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 간단한 웹 구성 요소로, 매력적인 마이크로 인터랙션과 어두운 테마를 지원하는 그레이스케일 색 구성표를 특징으로 합니다.

열다

블로그 기능 구성 요소

기능적 구성 요소 3D 디자인의 구성 요소, 보색 구성표, 블로그의 중간 정도의 복잡성, 어두운 테마 지원으로 반응 형. JS는 없고 HTML과 Tailwind만 있습니다.

열다