Composants
Tableaux de données
Tableau de données de dégradé arc-en-ciel inspiré du papier et de l’impression
Tableau de données de dégradé arc-en-ciel inspiré du papier et de l’impression
Un composant de tableau de données simple et réactif avec un design inspiré du papier/de l’impression et un arrière-plan dégradé arc-en-ciel subtil, adapté aux tableaux de bord. Inclut la prise en charge du mode sombre.
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>Composants associés
Composant Tableaux de données
Un composant de table de données réactif avec une conception Neumorphism, une palette de couleurs triadique et la prise en charge du mode sombre, adapté à un blog ou à un site de contenu.
Composant Tableaux de données
Composant de tables de données réactives avec prise en charge du mode sombre à l’aide de Tailwind CSS
Tableau de données
Composant de table de données réactif avec le style Material Design, avec prise en charge du mode sombre et du comportement réactif sans JavaScript. Comprend des images de remplacement pour la démonstration.