Componentes Tablas de datos Brutalist_ECommerce_Table
Brutalist_ECommerce_Table

Un componente de tabla de datos receptivo de estilo brutalista para comercio electrónico, con alto contraste, un esquema de color complementario (amarillo/morado) y compatibilidad con el modo oscuro. Diseñado para listados de productos o gestión de pedidos.
Vista previa

Código 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>
Componentes relacionados

Componente de tabla de datos

Tabla de datos responsiva con modo oscuro
Abrir
Tabla de datos de atención médica

Un componente de tabla de datos minimalista y sensible con tonos azules corporativos, adecuado para aplicaciones sanitarias. Incluye soporte para modo oscuro, búsqueda y paginación. Utiliza HTML semántico para la accesibilidad.
Abrir
Componente de tablas de datos

Un componente de tablas de datos responsivo diseñado en estilo skeuomórfico con soporte para temas oscuros utilizando Tailwind CSS.
Abrir