Organic_Nature_Dashboard_Data_Table
Il s’agit d’un composant de tableau de données de complexité modérée, inspiré de la nature et organique, pour les tableaux de bord avec une palette de couleurs vives, avec des lignes fluides, une réactivité et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-100 via-lime-100 to-sky-100 dark:from-slate-800 dark:via-gray-900 dark:to-teal-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden border border-emerald-200 dark:border-teal-700">
<div class="p-6 sm:p-8 lg:p-10 border-b border-emerald-200 dark:border-teal-700 bg-gradient-to-r from-emerald-500 to-sky-500 dark:from-emerald-700 dark:to-blue-800">
<h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-white mb-2">Recent Activity Flow</h2>
<p class="text-sm sm:text-base text-emerald-100 dark:text-teal-200">Insights from your latest natural data streams.</p>
<div class="mt-4 flex flex-wrap gap-3 sm:gap-4">
<button class="px-4 py-2 rounded-full text-sm font-medium bg-white text-emerald-600 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-emerald-300 dark:hover:bg-gray-600 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">Today</button>
<button class="px-4 py-2 rounded-full text-sm font-medium bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">This Week</button>
<button class="px-4 py-2 rounded-full text-sm font-medium bg-white text-emerald-600 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-emerald-300 dark:hover:bg-gray-600 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">This Month</button>
</div>
</div>
<div class="overflow-x-auto p-4 sm:p-6">
<table class="min-w-full divide-y divide-emerald-200 dark:divide-teal-700">
<thead class="bg-emerald-50 dark:bg-gray-700">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200 sm:pl-6">Source</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Event Type</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Value</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Status</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Timeline</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">View</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-emerald-100 dark:divide-teal-800 bg-white dark:bg-gray-800">
<tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile picture">
<span>LeafyGreen Insights</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Harvest Update</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-lime-600 dark:text-lime-400">+ 12.5%</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">
<span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-700 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-200">Completed</span>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">2 hours ago</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, LeafyGreen Insights</span></a>
</td>
</tr>
<tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile picture">
<span>Oceanic Data Stream</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Temperature Alert</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-red-600 dark:text-red-400">- 0.8°C</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">
<span class="inline-flex items-center rounded-full bg-yellow-100 dark:bg-yellow-700 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:text-yellow-200">Pending</span>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">5 hours ago</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, Oceanic Data Stream</span></a>
</td>
</tr>
<tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Profile picture">
<span>MountainPeak Analytics</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Soil Composition</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-blue-600 dark:text-blue-400">+ 3.1% N</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">
<span class="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-700 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-200">Processing</span>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">1 day ago</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, MountainPeak Analytics</span></a>
</td>
</tr>
<tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture">
<span>ForestPath Systems</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Ecosystem Health</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-purple-600 dark:text-purple-400">Score 8.9</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">
<span class="inline-flex items-center rounded-full bg-violet-100 dark:bg-purple-700 px-2.5 py-0.5 text-xs font-medium text-violet-800 dark:text-purple-200">Validated</span>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">3 days ago</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, ForestPath Systems</span></a>
</td>
</tr>
<tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile picture">
<span>RiverFlow Tech</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Water Quality Report</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-cyan-600 dark:text-cyan-400">pH 7.1</td>
<td class="whitespace-nowrap px-3 py-4 text-sm">
<span class="inline-flex items-center rounded-full bg-indigo-100 dark:bg-indigo-700 px-2.5 py-0.5 text-xs font-medium text-indigo-800 dark:text-indigo-200">Approved</span>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">4 days ago</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, RiverFlow Tech</span></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 sm:p-6 lg:p-8 border-t border-emerald-200 dark:border-teal-700 bg-emerald-50 dark:bg-gray-800">
<nav class="flex items-center justify-between text-sm sm:text-base">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 text-sm font-medium rounded-md text-emerald-700 dark:text-teal-200 bg-white dark:bg-gray-700 hover:bg-emerald-100 dark:hover:bg-gray-600">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 text-sm font-medium rounded-md text-emerald-700 dark:text-teal-200 bg-white dark:bg-gray-700 hover:bg-emerald-100 dark:hover:bg-gray-600">
Next
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">5</span>
of
<span class="font-medium">12</span>
results
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="z-10 bg-emerald-600 border-emerald-600 text-white relative inline-flex items-center px-4 py-2 text-sm font-medium">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">
...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
12
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</nav>
</div>
</div>
</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.
Job_Application_Data_Table
Un composant de tableau de données réactif et interactif pour les candidatures, conçu avec un style typographique suisse/international épuré et minimaliste et une palette de couleurs sourdes. Comprend le filtrage, le tri, la pagination et la prise en charge du mode sombre.