带有渐变侧边栏的博客布局

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-500 font-sans">
  <header class="w-full py-4 px-6 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-700 dark:to-indigo-900 shadow-md flex justify-between items-center">
    <a href="#" class="text-2xl font-bold text-white tracking-tight">MutedBlog</a>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Home</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Categories</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Contact</a>
    </nav>
    <button class="md:hidden text-white focus:outline-none">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </header>

  <main class="container mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Main Content Area -->
    <section class="md:col-span-2 space-y-8">
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=1" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">The Serenity of Desaturated Landscapes</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 26, 2023 by Jane Doe</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Dive deep into the tranquil beauty of muted tones and discover how subtle changes in color can evoke profound emotions. This piece explores the artistic choices behind desaturated photography and its impact on viewers.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>

      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=2" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Minimalist Living: A Gentle Approach</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 24, 2023 by John Smith</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Explore the core principles of minimalist living focusing on simplicity and functionality, all while embracing a soft, understated aesthetic. Less is truly more when it comes to mindful living.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>

      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=3" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Understanding Color Theory for Web Design</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 22, 2023 by Emily White</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">A deep dive into the psychological effects of color and how muted palettes can create a sense of calm and sophistication in user interfaces. Perfect for designers looking to refine their aesthetic.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>
    </section>

    <!-- Sidebar (Categories & About) -->
    <aside class="space-y-8">
      <div class="bg-gradient-to-br from-indigo-300 to-purple-400 dark:from-indigo-700 dark:to-purple-900 rounded-lg shadow-lg p-6 text-white transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-white border-opacity-30 pb-2">Categories</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Photography (7)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Lifestyle (5)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Design (9)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Wellness (3)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Technology (6)</a></li>
        </ul>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-gray-800 dark:text-gray-200 transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2">About Us</h3>
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover border-4 border-teal-400 dark:border-teal-600 transition-all duration-300">
        <p class="text-center leading-relaxed">We are a collective of writers passionate about bringing you serene and thoughtful content on art, life, and design. Our aim is to provide a calm reading experience.</p>
        <p class="text-center mt-3"><a href="#" class="text-teal-600 dark:text-teal-400 hover:underline transition-colors duration-300">Learn More</a></p>
      </div>

      <div class="bg-gradient-to-br from-red-300 to-orange-400 dark:from-red-700 dark:to-orange-900 rounded-lg shadow-lg p-6 text-white transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-white border-opacity-30 pb-2">Subscribe</h3>
        <p class="mb-4 text-sm">Get our latest articles delivered right to your inbox.</p>
        <form class="flex flex-col space-y-3">
          <input type="email" placeholder="Your email address" class="p-3 rounded-md border-0 focus:ring-2 focus:ring-white focus:outline-none bg-white bg-opacity-20 text-white placeholder-white::placeholder-opacity-75 transition-all duration-300">
          <button type="submit" class="bg-white text-orange-600 font-semibold py-3 px-4 rounded-md hover:bg-gray-100 transition-all duration-300">Subscribe Now</button>
        </form>
      </div>
    </aside>
  </main>

  <footer class="w-full py-6 px-6 bg-gray-200 dark:bg-gray-900 text-center text-gray-700 dark:text-gray-300 transition-colors duration-500">
    <p>&copy; 2023 MutedBlog. All rights reserved.</p>
    <nav class="mt-2 space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300">Privacy Policy</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300">Terms of Service</a>
    </nav>
  </footer>
</div>