HTML 代码
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden"> <div class="overflow-x-auto"> <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg"> <thead> <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal"> <th class="py-3 px-6 text-left">User</th> <th class="py-3 px-6 text-left">Activity</th> <th class="py-3 px-6 text-center">Likes</th> <th class="py-3 px-6 text-center">Comments</th> </tr> </thead> <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light"> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/> </div> <span>John Doe</span> </div> </td> <td class="py-3 px-6 text-left">Posted a photo</td> <td class="py-3 px-6 text-center">125</td> <td class="py-3 px-6 text-center">36</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/> </div> <span>Jane Smith</span> </div> </td> <td class="py-3 px-6 text-left">Commented on a post</td> <td class="py-3 px-6 text-center">88</td> <td class="py-3 px-6 text-center">12</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/> </div> <span>Peter Jones</span> </div> </td> <td class="py-3 px-6 text-left">Shared a link</td> <td class="py-3 px-6 text-center">54</td> <td class="py-3 px-6 text-center">7</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/> </div> <span>Mary Williams</span> </div> </td> <td class="py-3 px-6 text-left">Liked a photo</td> <td class="py-3 px-6 text-center">201</td> <td class="py-3 px-6 text-center">45</td> </tr> </tbody> </table> </div></div>