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

Dashboards 구성 요소

Responsive Dashboards Microinteractions, Grayscale 색 구성표 및 블로그/콘텐츠 목적에 맞게 조정된 복잡한 복잡성 수준이 있는 구성 요소입니다. 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Content Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero et diam euismod, vitae elementum.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Peter Jones</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

  </div>
</div>

관련 구성 요소

Cryptocurrency Dashboard 구성 요소

스위스/국제 타이포그래피 디자인 스타일을 갖춘 복잡하고 반응이 빠른 암호화폐 대시보드 구성 요소로, 멀티 컬러 그라디언트 요소와 다크 모드 지원을 특징으로 합니다. 여기에는 포트폴리오 개요, 시장 동향, 최근 거래 및 차트와 같은 여러 섹션이 포함됩니다.

열다

Dashboard_Agriculture_ForestGreen_Luxury

농업 및 농업 웹 사이트를 위해 설계된 복잡한 럭셔리 테마의 대시보드 구성 요소로, 우아한 숲/녹색 색상 팔레트와 다크 모드 지원으로 완벽한 응답성을 제공합니다.

열다

Dashboard_Weather_Climate_Swiss

스위스/인터내셔널 타이포그래피(Swiss/International Typography)에서 영감을 받은 복잡하고 반응이 빠른 날씨 및 기후 대시보드 구성 요소로, 어스 톤을 사용하고 다크 모드를 지원합니다. 현재 날씨, 예측, 대기 질 및 기후 추세와 같은 여러 데이터 포인트를 제공합니다.

열다