Компонент таблиц данных
Адаптивная таблица данных для дашборда с поддержкой темной темы
HTML-код
<div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
<h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="text-gray-700 dark:text-gray-400">
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>John Doe</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Admin</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>Jane Smith</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Editor</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>Peter Jones</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Viewer</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
</tr>
</tbody>
</table>
</div>
</div>Связанные компоненты
Organic_Nature_Dashboard_Data_Table
Компонент таблицы данных умеренной сложности, вдохновленный органикой и природой для информационных панелей с яркой цветовой схемой, плавными линиями, отзывчивостью и поддержкой темного режима.
Компонент таблиц данных
Компонент таблиц данных, разработанный в стиле брутализма с высокой насыщенностью цветов для электронной коммерции, адаптивный с поддержкой темных тем.
Ретро-сетка данных
Адаптивный компонент таблицы данных, стилизованный в стиле ретро/винтаж 80-х/90-х годов с использованием Tailwind CSS. Он отличается блочным дизайном, яркими цветовыми акцентами (фиолетовый/оранжевый в светлом режиме, зеленый/неоновый в темном режиме) и моноширинным шрифтом для ностальгического ощущения техники. Таблица включает в себя различные стили заголовков и строк, элементы с рамками, такие как аватары и значки статуса, а также поддерживает темный режим через CSS. К данным заполнителей относятся аватары пользователей, контактная информация, значки статуса, роли и даты присоединения. Таблица прокручивается горизонтально на небольших экранах для лучшей отзывчивости.