Компоненты Таблицы данных Таблица данных о брутализме

Таблица данных о брутализме

Простой, брутальный компонент таблицы данных с аналогичными цветами для бизнес/корпоративных сайтов. Он адаптивный и поддерживает темный режим с использованием 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>

Связанные компоненты

Industrial_Gaming_Data_Table

Сложный, адаптивный компонент таблицы данных, разработанный для игровых веб-сайтов, отличающийся индустриальной эстетикой с открытыми элементами и осенней цветовой гаммой. Включает в себя фильтрацию, сортировку, пагинацию и поддержку темного режима.

Открытый

Таблица данных Luxury/Premium для некоммерческих/благотворительных организаций

Элегантный, отзывчивый компонент таблицы данных, выполненный в роскошном / премиальном стиле с использованием корпоративных синих тонов, подходит для некоммерческих и благотворительных организаций. Включает в себя поддержку темного режима и сложный интерфейс для отображения данных с действиями.

Открытый

Компонент таблиц данных

Адаптивный компонент таблицы данных в стиле ретро/винтаж, разработанный с использованием Tailwind CSS, поддерживающий темный режим и включающий ностальгические элементы дизайна из 80-х/90-х годов.

Открытый