水彩艺术数据表

<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>