Art Deco News Tabs 组件

<div class="font-sans bg-amber-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-amber-100 dark:bg-zinc-800 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border-inverted"></div>

    <!-- Main Content Area -->
    <div class="p-6 md:p-10 lg:p-12 relative z-10">
      <h2 class="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 md:mb-12 text-zinc-800 dark:text-amber-50 drop-shadow-lg font-serif tracking-wide leading-tight">
        <span class="block">The Daily Dispatch</span>
        <span class="block text-2xl sm:text-3xl md:text-4xl text-amber-600 dark:text-sky-500 mt-2 font-normal">Global News at Your Fingertips</span>
      </h2>

      <!-- Tabs Navigation -->
      <div class="flex flex-wrap justify-center mb-8 border-b-4 border-amber-300 dark:border-zinc-700 bg-amber-200 dark:bg-zinc-700 rounded-t-lg shadow-inner">
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 first:rounded-tl-lg last:rounded-tr-lg active-tab transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Headlines</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">World</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Business</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Tech</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Culture</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
      </div>

      <!-- Tab Content Area -->
      <div class="tab-content bg-amber-50 dark:bg-zinc-900 p-6 md:p-8 lg:p-10 rounded-b-lg border-2 border-amber-300 dark:border-zinc-700 shadow-lg">
        <!-- Headline Tab Content -->
        <div class="tab-pane active-pane">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- News Card 1 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Revolutionary AI Breakthrough Achieves Human-Level Cognition</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Scientists at the Silicon Valley Institute announce a groundbreaking development in artificial intelligence, achieving unprecedented cognitive capabilities...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Technology</span>
                  <span>2 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 2 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=2" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Global Leaders Convene for Climate Emergency Summit</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Delegates from over 150 nations have gathered in Geneva to address the escalating climate crisis, proposing bold new targets and initiatives...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">World Affairs</span>
                  <span>5 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 3 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=3" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Art Market Boom: Rare Masterpiece Fetches Record Price</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">A previously unseen painting by a renowned Post-Impressionist artist sold for an astounding sum at Sotheby's, signaling a robust fine art market...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Culture</span>
                  <span>1 day ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 4 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden md:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=4" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">New Economic Policies Aim to Boost Small Businesses</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Government unveils a comprehensive stimulus package, including tax breaks and grants, designed to support and foster growth among small and medium enterprises...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Business & Finance</span>
                  <span>Yesterday</span>
                </div>
              </div>
            </article>

            <!-- News Card 5 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden lg:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=5" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Exploration Mission Discovers Ancient Underwater City</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Deep-sea archaeologists have uncovered ruins of a vast civilization beneath the Pacific, rewriting history and sparking new theories...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Science & Discovery</span>
                  <span>2 days ago</span>
                </div>
              </div>
            </article>

             <!-- Large News Card (Featured Headline - visible on all screens) -->
             <article class="col-span-1 md:col-span-2 lg:col-span-3 bg-amber-200 dark:bg-zinc-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border-4 border-amber-400 dark:border-sky-600 group relative flex flex-col md:flex-row">
                <div class="absolute inset-0 bg-gradient-to-br from-gold-500/30 to-yellow-700/30 dark:from-cyan-600/30 dark:to-blue-800/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
                <img src="https://picsum.photos/800/600?random=6" alt="Feature News Image" class="w-full md:w-1/2 h-64 md:h-auto object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none border-b-4 md:border-r-4 border-amber-400 dark:border-sky-600">
                <div class="p-6 md:p-8 lg:p-10 flex flex-col justify-center w-full md:w-1/2">
                  <h3 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-zinc-900 dark:text-amber-50 mb-4 leading-tight font-serif drop-shadow-md">
                    <a href="#" class="hover:text-amber-800 dark:hover:text-sky-300 transition-colors duration-200">Exclusive: Geopolitical Tensions Rise Amidst Unprecedented Diplomatic Shuffle</a>
                  </h3>
                  <p class="text-zinc-800 dark:text-zinc-100 text-lg mb-6 line-clamp-4 leading-relaxed">Our senior correspondents provide an in-depth analysis of the recent shifts in international relations, exploring the ripple effects across continents and the potential for a new global order. Exclusive insights from top diplomats and analysts reveal complex motivations and hidden agendas...</p>
                  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between text-md text-amber-700 dark:text-sky-300 font-semibold">
                    <span class="mb-2 sm:mb-0">Featured Analysis</span>
                    <div class="flex items-center">
                      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-amber-400 dark:border-sky-600">
                      <span>By Dr. Alistair Finch • 3 hours ago</span>
                    </div>
                  </div>
                </div>
              </article>

          </div>
        </div>

        <!-- Other Tab Contents (Hidden by default, for demonstration) -->
        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'World News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">European Union Reforms</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New parliamentary decisions reshape the future of the European economy and social policies...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Middle East Peace Talks</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Renewed diplomatic efforts aim to broker a lasting peace agreement in the troubled region...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Business News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Stock Market Volatility</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Analysts warn of impending corrections amid global economic uncertainties...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Tech Giant Acquisitions</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Major players in the tech industry are consolidating their power through strategic buyouts...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Tech News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Quantum Computing Leaps</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New advancements promise to revolutionize computation and data security...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">AI Ethics Debate</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Philosophers and engineers grapple with the moral implications of autonomous systems...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Culture News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Emerging Art Scenes</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Underground art movements are gaining mainstream recognition in major cities...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Literary Awards Season</h3>
              <p class="text-zinc-700 dark:text-zinc-300">The annual celebration of literary excellence unveils unexpected winners...</p>
            </article>
          </div>
        </div>

      </div>

      <div class="text-center mt-8 md:mt-12 text-zinc-600 dark:text-zinc-400 text-sm">
        <p>&copy; 2023 The Daily Dispatch. All rights reserved. Designed with Art Deco flair.</p>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Art Deco Geometric Patterns -->
<style>
  .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
  /* Dark mode specific adjustments for clip-path */
  .dark .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .dark .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
</style>

<!-- Simple JS for tab functionality (as per instructions, only HTML and Tailwind, but functional tabs require JS) -->
<!-- For a real-world scenario, this JS would be external or inline if absolutely necessary. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabButtons = document.querySelectorAll('.flex.flex-wrap button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
      button.addEventListener('click', (event) => {
        // Remove active state from all buttons and panes
        tabButtons.forEach(btn => btn.classList.remove('active-tab'));
        tabPanes.forEach(pane => pane.classList.add('hidden'));

        // Add active state to the clicked button
        event.currentTarget.classList.add('active-tab');

        // Determine which tab content to show based on button index
        const index = Array.from(tabButtons).indexOf(event.currentTarget);
        if (tabPanes[index]) {
          tabPanes[index].classList.remove('hidden');
        }
      });
    });

    // Initialize first tab as active
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>