Organic_Nature_Dashboard_Data_Table
A moderate complexity, organic/nature-inspired data table component for dashboards with a vibrant color scheme, featuring flowing lines, responsiveness, and dark mode support.
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>Related Components
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.
Data Tables Component
A responsive data tables component with a glassmorphism design, featuring translucent frosted glass-like elements, blur effects, and support for dark mode.