Paper/Print-Inspired Rainbow Gradient Data Table
A simple, responsive data table component with a paper/print-inspired design and a subtle rainbow gradient background, suitable for dashboards. Includes dark mode support.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 print-effect">
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">Dashboard Data</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Overview of recent activities.</p>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Project
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Due Date
</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Members
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Q3 Marketing Campaign</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
Completed
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-09-30
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Website Redesign V2</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
In Progress
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-11-15
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
</div>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Client Onboarding Process</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100">
Pending
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-01
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar">
</div>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Annual Budget Review</div>
</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">
Delayed
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-12-31
</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Avatar">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-right">
<p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
</div>
</div>
<style>
/* Basic print-like shadow/border, optional for subtle effect */
.print-effect {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Optional: Add a subtle paper texture or slight curl via pseudo-elements */
.print-effect::before,
.print-effect::after {
content: '';
position: absolute;
z-index: -1;
transform: rotate(-0.5deg);
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.print-effect::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
}
.print-effect::after {
top: 0;
right: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(0.5deg);
}
.print-effect:hover::before {
transform: rotate(-1deg);
}
.print-effect:hover::after {
transform: rotate(1deg);
}
</style>
</div>Related Components
Industrial_Gaming_Data_Table
A complex, responsive data table component designed for gaming websites, featuring an industrial aesthetic with exposed elements and an autumn color scheme. Includes filtering, sorting, pagination, and dark mode support.
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
Glassmorphism Data Tables Component with vibrant colors for portfolio, responsive with dark mode support. No JavaScript needed, only HTML with Tailwind CSS.