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

Brutalist_ECommerce_Table

전자 상거래를 위한 브루탈리즘 스타일의 반응형 데이터 테이블 구성 요소로, 고대비, 보색 구성표(노란색/보라색) 및 다크 모드 지원을 특징으로 합니다. 제품 목록 또는 주문 관리를 위해 설계되었습니다.

미리 보기

HTML 코드 

<div class="font-sans p-4 sm:p-6 md:p-8 bg-yellow-100 dark:bg-purple-900 min-h-screen text-purple-900 dark:text-yellow-100 transition-colors duration-300">

  <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold mb-6 sm:mb-8 text-black dark:text-yellow-300 uppercase tracking-widest border-b-4 border-l-4 border-black dark:border-yellow-300 p-2 transform -skew-x-6 inline-block">
    Product Listings
  </h2>

  <div class="overflow-x-auto border-4 border-black dark:border-yellow-300 bg-purple-200 dark:bg-purple-950 shadow-brutalist">
    <table class="w-full text-left border-collapse">
      <thead class="border-b-4 border-black dark:border-yellow-300 bg-purple-500 dark:bg-purple-800 text-yellow-100 dark:text-yellow-100">
        <tr>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            ID
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            Product
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider hidden sm:table-cell border-r-4 border-black dark:border-yellow-300">
            Category
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            Price
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Product 1 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#001</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=1" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Crude Widget X</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Electronics</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$19.99</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 2 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#002</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=2" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Bold Apparatus MKII</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Tools</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$45.00</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 3 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#003</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=3" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Raw Material A</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Material</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$7.50</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 4 -->
        <tr class="even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#004</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=4" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Unrefined Gadget Z</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Components</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$12.25</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mt-8 flex justify-between items-center flex-wrap gap-4">
    <p class="text-sm sm:text-base font-bold text-black dark:text-yellow-300 tracking-wide">
      Showing 1 to 4 of 12 items
    </p>
    <div class="flex space-x-2">
      <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
        Prev
      </button>
      <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
        Next
      </button>
    </div>
  </div>

</div>

<style>
  /* Brutalist Shadow for the table container */
  .shadow-brutalist {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }

  .dark .shadow-brutalist {
    box-shadow: 10px 10px 0px 0px var(--tw-color-yellow-300);
  }
</style>

관련 구성 요소

데이터 테이블 구성 요소

Glassmorphism Data Tables 포트폴리오를 위한 생생한 색상을 가진 구성 요소, 다크 모드 지원으로 반응합니다. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.

열다

데이터 테이블 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 스큐어모픽 스타일로 설계된 반응형 데이터 테이블 구성 요소입니다.

열다

데이터 테이블 구성 요소

Brutalism 스타일로 디자인된 데이터 테이블 구성 요소는 전자 상거래를 위한 채도가 높은 색상을 특징으로 하며 어두운 테마 지원으로 반응합니다.

열다