HTML 代码
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg"> <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Site Map</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 1</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">About Us</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Services</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Contact</a></li> </ul> </div> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 2</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Pricing</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Testimonials</a></li> </ul> </div> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 3</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">FAQs</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Support</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a></li> </ul> </div> </div> <div class="mt-8"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Team</h3> <div class="flex space-x-4 mt-2"> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic1/100/100" alt="Avatar" class="rounded-full"> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic2/100/100" alt="Avatar" class="rounded-full"> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic3/100/100" alt="Avatar" class="rounded-full"> </div> </div> </div></div>