Data Tables Component
A responsive data tables component with a glassmorphism design, featuring translucent frosted glass-like elements, blur effects, and support for dark mode.
HTML Code
<div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Additional styles for glassmorphism */
body {
background: rgb(239, 246, 255);
background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
}
.bg-white {
background: rgba(255, 255, 255, 0.9) !important;
}
/* Dark mode adjustments */
.dark .bg-white {
background: rgba(31, 41, 55, 0.7) !important;
}
</style>Related Components
Data Tables Component
A responsive Data Tables Component designed in Skeuomorphic style with dark theme support using Tailwind CSS.
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.
Data Tables Component
A simple data table component with earth tone colors, micro-interactions, and dark mode support, suitable for social media interfaces.