HTML 代码
<nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center mb-4 md:mb-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
</div>
<ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</nav>
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
</div>
</div>
</div>