HTML 代码
<header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</nav>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-900 dark:text-white">Username</span>
</div>
</header>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Define pastel colors */
.bg-pastel-100 {
background-color: #F9D7C1;
}
}
</style>