Компонент таблиц данных
Адаптивный компонент таблицы данных, выполненный в минималистичном и плоском дизайне, подходит для бизнес/корпоративных веб-сайтов, с поддержкой темных тем.
HTML-код
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700">
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
<td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
</tr>
</tbody>
</table>
</div>Связанные компоненты
Ретро-сетка данных
Адаптивный компонент таблицы данных, стилизованный в стиле ретро/винтаж 80-х/90-х годов с использованием Tailwind CSS. Он отличается блочным дизайном, яркими цветовыми акцентами (фиолетовый/оранжевый в светлом режиме, зеленый/неоновый в темном режиме) и моноширинным шрифтом для ностальгического ощущения техники. Таблица включает в себя различные стили заголовков и строк, элементы с рамками, такие как аватары и значки статуса, а также поддерживает темный режим через CSS. К данным заполнителей относятся аватары пользователей, контактная информация, значки статуса, роли и даты присоединения. Таблица прокручивается горизонтально на небольших экранах для лучшей отзывчивости.
Таблица данных о брутализме
Простой, брутальный компонент таблицы данных с аналогичными цветами для бизнес/корпоративных сайтов. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.
Job_Application_Data_Table
Отзывчивый и интерактивный компонент таблицы данных для заявлений о приеме на работу, выполненный в чистом, минималистичном швейцарском/международном типографском стиле и приглушенной цветовой гамме. Включает фильтрацию, сортировку, пагинацию и поддержку темного режима.