CCHub Logo CCHub Tailwind Collection
구성 요소 데이터 테이블 Brutalism 데이터 테이블

Brutalism 데이터 테이블

비즈니스/기업 웹 사이트를 위한 유사한 색상을 가진 단순하고 잔인한 데이터 테이블 구성 요소입니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <table class="min-w-full border-collapse border-spacing-0 shadow-xl">
    <thead>
      <tr class="bg-teal-500 dark:bg-teal-700 text-white">
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Name</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Title</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Status</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">John Doe</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Software Engineer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-300 dark:bg-teal-500 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Jane Smith</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">UI/UX Designer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Peter Jones</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Product Manager</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Inactive</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Admin</td>
      </tr>
    </tbody>
  </table>
</div>

관련 구성 요소

데이터 테이블 구성 요소

스큐어모픽 스타일로 설계된 데이터 테이블 구성 요소로, 반응형 효과로 실제 항목을 모방하고 어두운 테마를 지원합니다. 테이블에는 머리글, 데이터가 있는 행이 포함되며 자리 표시자 이미지를 사용합니다.

열다

데이터 테이블 구성 요소

미니멀하고 플랫 한 디자인으로 스타일링된 반응형 데이터 테이블 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 어두운 테마를 지원합니다.

열다

Non-Profit/Charity를 위한 Luxury/Premium Data Table

우아하고 반응이 빠른 데이터 테이블 구성 요소는 기업의 블루 톤을 사용하여 고급스러움/프리미엄 느낌으로 설계되었으며 비영리 및 자선 단체에 적합합니다. 다크 모드 지원과 작업으로 데이터를 표시하기 위한 복잡한 인터페이스가 포함되어 있습니다.

열다