Watercolor Artistic Data Table
A responsive data table component with a soft, watercolor/artistic design style and sweet, candy-like colors, suitable for non-profit/charity organizations. Includes dark mode support and showcases moderate complexity with a focus on visual appeal and readability.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 via-pink-50 to-rose-50 dark:from-purple-950 dark:via-pink-950 dark:to-rose-950 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto backdrop-blur-sm bg-white/70 dark:bg-gray-800/70 shadow-xl rounded-3xl overflow-hidden ring-2 ring-pink-300 dark:ring-pink-700 p-4 sm:p-6 lg:p-8">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 pb-4 border-b border-pink-200 dark:border-pink-800">
<div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight drop-shadow-md tracking-wide">Donation Impact Dashboard</h2>
<p class="mt-2 text-lg text-rose-500 dark:text-rose-300 font-medium">See the difference our community makes, presented with a touch of art.</p>
</div>
<button class="mt-4 sm:mt-0 px-6 py-3 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white dark:from-pink-600 dark:to-rose-600 hover:from-pink-600 dark:hover:from-pink-700 hover:to-rose-600 dark:hover:to-rose-700 transition-all duration-300 shadow-lg hover:shadow-xl font-bold tracking-wide text-lg border-2 border-white/50 dark:border-gray-900/50 transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 flex items-center justify-center space-x-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span>Add New Record</span>
</button>
</div>
<!-- Search and Filter Section -->
<div class="mb-6 flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
<div class="relative w-full sm:w-2/3">
<input type="text" placeholder="Search by Donor, Cause, or Date..." class="w-full pl-10 pr-4 py-3 rounded-full bg-pink-100 dark:bg-gray-700 border-2 border-pink-200 dark:border-pink-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 placeholder-pink-400 dark:placeholder-pink-500 shadow-inner">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-pink-400 dark:text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<select class="w-full sm:w-1/3 appearance-none px-4 py-3 rounded-full bg-pink-100 dark:bg-gray-700 border-2 border-pink-200 dark:border-pink-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 shadow-inner cursor-pointer">
<option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="all">Filter by Cause</option>
<option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="education">Education</option>
<option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="health">Health & Wellness</option>
<option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="environment">Environment</option>
<option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="animals">Animal Welfare</option>
</select>
</div>
<!-- Table Section -->
<div class="overflow-x-auto rounded-2xl ring-1 ring-pink-200 dark:ring-pink-800 shadow-xl">
<table class="min-w-full divide-y divide-pink-200 dark:divide-pink-800 table-auto">
<thead class="bg-pink-200/80 dark:bg-pink-900/80 sticky top-0 backdrop-blur-sm">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider rounded-tl-2xl">Donor</th>
<th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Cause</th>
<th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Date</th>
<th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider hidden sm:table-cell">Status</th>
<th scope="col" class="px-4 py-3 text-right text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider rounded-tr-2xl">Actions</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-pink-100 dark:divide-pink-800">
<!-- Row 1 -->
<tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Donor Avatar">
<span>Olivia Chen</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$500.00</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
<span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Education</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-26</td>
<td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
Completed
</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
<a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Donor Avatar">
<span>Marcus Lee</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$1,200.00</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
<span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">Health</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-25</td>
<td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
Completed
</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
<a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Donor Avatar">
<span>Sarah Project</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$250.00</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
<span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Environment</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-24</td>
<td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
Completed
</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
<a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Donor Avatar">
<span>David Kim</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$75.00</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
<span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">Animal Welfare</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-23</td>
<td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
Completed
</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
<a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
</td>
</tr>
<!-- Row 5 -->
<tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
<img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Donor Avatar">
<span>Emily White</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$150.00</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
<span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Education</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-22</td>
<td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
Completed
</span>
</td>
<td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
<a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
<a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<nav class="mt-8 flex items-center justify-between flex-col sm:flex-row space-y-4 sm:space-y-0 text-sm sm:text-base">
<div class="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">50</span> results
</div>
<div class="inline-flex -space-x-px rounded-full shadow-md ring-1 ring-pink-200 dark:ring-pink-800 overflow-hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 rounded-l-full transition-all duration-200">
Previous
</a>
<a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 font-semibold text-white bg-gradient-to-r from-pink-500 to-rose-500 dark:from-pink-600 dark:to-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-300 dark:focus:ring-rose-700 transition-all duration-200">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
2
</a>
<a href="#" class="relative hidden sm:inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800">...</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
10
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 rounded-r-full transition-all duration-200">
Next
</a>
</div>
</nav>
</div>
</div>Related Components
Data Tables Component
A responsive data table component styled in a minimalist and flat design, suitable for business/corporate websites, with dark theme support.
Luxury_Premium_Manufacturing_Data_Table
A complex, responsive data table component for manufacturing/industrial use, featuring a luxury/premium design with a black and white color scheme and a single bright accent color. Includes dark mode support and interactive elements.
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.