Papier-/Druck-inspirierte Regenbogen-Verlaufsdatentabelle
Eine einfache, reaktionsschnelle Datentabellenkomponente mit einem von Papier/Druck inspirierten Design und einem dezenten Regenbogenverlaufshintergrund, der sich für Dashboards eignet. Enthält Unterstützung für den Dunkelmodus.
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>Verwandte Komponenten
Organic_Nature_Dashboard_Data_Table
Eine organische/von der Natur inspirierte Datentabellenkomponente mittlerer Komplexität für Dashboards mit einem lebendigen Farbschema mit fließenden Linien, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Brutalist_ECommerce_Table
Eine reaktionsschnelle Datentabellenkomponente im brutalistischen Stil für den E-Commerce mit hohem Kontrast, einem komplementären Farbschema (Gelb/Lila) und Unterstützung für den Dunkelmodus. Entwickelt für Produktlisten oder Auftragsverwaltung.
Komponente "Datentabellen"
Glassmorphism Data Tables Component mit lebendigen Farben für das Portfolio, reaktionsschnell mit Unterstützung für den Dunkelmodus. Kein JavaScript erforderlich, nur HTML mit Tailwind CSS.