Data Tables Component
A simple data table component with earth tone colors, micro-interactions, and dark mode support, suitable for social media interfaces.
HTML Code
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
User
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Joined
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/85.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
John Doe
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Active
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jan 10, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/45.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jane Smith
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Pending
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Feb 15, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/60.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Peter Jones
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Inactive
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Mar 20, 2023
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Related Components
Data Tables Component
Glassmorphism Data Tables Component with vibrant colors for portfolio, responsive with dark mode support. No JavaScript needed, only HTML with Tailwind CSS.
Data Tables Component
A responsive data table component for documentation/wiki sites, featuring dark mode support, earth-tone color scheme, and semantic HTML. Designed for complex interfaces with multiple columns, actions, and pagination.
Retro Data Grid
A responsive data table component styled with a retro/vintage 80s/90s aesthetic using Tailwind CSS. It features a blocky design, vibrant color accents (purple/orange in light mode, green/neon in dark mode), and a monospace font for a nostalgic tech feel. The table includes distinct header and row styling, bordered elements like avatars and status badges, and supports dark mode via CSS. Placeholder data includes user avatars, contact information, status badges, roles, and join dates. The table is horizontally scrollable on smaller screens for better responsiveness.