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 sur le thème du style rétro/vintage, conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des éléments de design nostalgiques des années 80/90.
Skeuomorphic_Earth_Tone_Data_Table
Un tableau de données simple et réactif avec un style de conception skeuomorphe et une palette de couleurs terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant Tableaux de données
Glassmorphism Data Tables Composant aux couleurs vives pour le portefeuille, réactif avec prise en charge du mode sombre. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.