Komponente "Datentabellen"

<div class="p-8 font-sans antialiased text-gray-700 bg-gray-200 dark:bg-gray-900 dark:text-gray-200 transition-all duration-500">
  <div class="p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">Our Latest Posts</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-left table-auto">
        <thead>
          <tr>
            <th class="p-4 rounded-tl-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Title</th>
            <th class="p-4 bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Category</th>
            <th class="p-4 rounded-tr-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post1/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Exploring Neumorphism in UI Design                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-200 rounded-full dark:text-blue-200 dark:bg-blue-800">Design</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-15</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post2/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                The Future of Web Development                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">Technology</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-20</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post3/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Mastering Tailwind CSS                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-red-800 bg-red-200 rounded-full dark:text-red-200 dark:bg-red-800">Front-end</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-25</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post4/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                A Journey into Minimalist Art                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">Art</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-02-01</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows for light theme */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a6a6a6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows for dark theme */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #2e2e2e;
  }

</style>

<script>
  // This script is for demonstration purposes to toggle dark mode.
  // In a real application, you might use a theme switcher or OS preference.
  document.documentElement.classList.add('dark');
</script>