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

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

Адаптивный компонент таблиц данных, разработанный в стиле Neumorphism с использованием Tailwind CSS, с поддержкой темных тем и случайными изображениями-заполнителями.

Предварительный просмотр

HTML-код

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
        <table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
            <thead>
                <tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
                    <th class="py-3 px-4 text-left">#</th>
                    <th class="py-3 px-4 text-left">Avatar</th>
                    <th class="py-3 px-4 text-left">Name</th>
                    <th class="py-3 px-4 text-left">Email</th>
                    <th class="py-3 px-4 text-left">Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">1</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">John Doe</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(123) 456-7890</td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">2</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">Jane Smith</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(321) 654-0987</td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">3</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">Mike Johnson</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(456) 789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

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

Ретро-сетка данных

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

Открытый

Таблица данных радужного градиента, вдохновленная бумагой/печатью

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

Открытый

ArtDecoCryptoDataTable

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

Открытый