All Components

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 transform -rotate-6">

    <!-- Main Circle (Teal) -->
    <div class="absolute inset-0 rounded-full bg-teal-500 dark:bg-emerald-600 shadow-xl overflow-hidden animate-pulse-slow p-4">
      <!-- Inner Circle Slice (Orange) -->
      <div class="absolute top-0 left-1/2 -translate-x-1/2 w-4/5 h-4/5 rounded-full bg-orange-400 dark:bg-amber-500 transform rotate-45 origin-bottom animate-spin-slow shadow-lg"></div>
    </div>

    <!-- Animated Squiggles/Patterns -->
    <div class="absolute top-8 left-8 w-20 h-20 bg-pink-400 dark:bg-fuchsia-600 rounded-full animate-bounce-slow shadow-md"></div>
    <div class="absolute bottom-12 right-10 w-16 h-16 bg-lime-400 dark:bg-lime-600 rounded-lg transform rotate-12 animate-wiggle-slow shadow-md"></div>
    <div class="absolute top-1/4 right-8 w-12 h-12 bg-yellow-300 dark:bg-yellow-500 rounded-full animate-spin-faster shadow-md"></div>
    <div class="absolute bottom-1/3 left-6 w-10 h-10 bg-blue-400 dark:bg-cyan-600 rounded-md transform -rotate-45 animate-fade-in-out shadow-md"></div>

    <!-- Central 'Loading' Text/Icon -->
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-purple-600 dark:bg-indigo-700 shadow-2xl flex items-center justify-center p-4 transform rotate-6 animate-scale-bounce">
        <div class="relative w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 rounded-full bg-purple-700 dark:bg-indigo-800 flex items-center justify-center border-4 border-dashed border-yellow-300 dark:border-yellow-500 animate-spin-slow-reverse">
            <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white dark:text-gray-100 animate-pulse" 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="M14.752 11.168l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536L14.752 11.168m0 0a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536 3.536a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536-3.536a-2.5 2.5 0 01-.707 3.536L12 17.5M9.5 12.000a-2.5 2.5 0 01-.707 3.536L12 17.5" />
            </svg>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }
  @keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes spin-slow-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
  @keyframes spin-faster {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(10px); }
  }
  @keyframes wiggle-slow {
    0%, 100% { transform: rotate(12deg); }
    50% { transform: rotate(-12deg); }
  }
  @keyframes fade-in-out {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
  }
  @keyframes scale-bounce {
    0%, 100% { transform: scale(1) rotate(6deg); }
    50% { transform: scale(1.05) rotate(6deg); }
  }

  .animate-pulse-slow { animation: pulse-slow 3s infinite ease-in-out; }
  .animate-spin-slow { animation: spin-slow 10s linear infinite; }
  .animate-spin-slow-reverse { animation: spin-slow-reverse 8s linear infinite; }
  .animate-spin-faster { animation: spin-faster 4s linear infinite; }
  .animate-bounce-slow { animation: bounce-slow 4s infinite ease-in-out; }
  .animate-wiggle-slow { animation: wiggle-slow 6s infinite ease-in-out; }
  .animate-fade-in-out { animation: fade-in-out 5s infinite ease-in-out; }
  .animate-scale-bounce { animation: scale-bounce 2.5s infinite ease-in-out; }
</style>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <!-- Trigger Element -->
    <button
      class="peer px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg 
             focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 
             transition-all duration-300 ease-in-out transform hover:scale-105 
             dark:bg-blue-800 dark:hover:bg-blue-700"
      aria-describedby="tooltip-info"
    >
      <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.707 6.364l-.707-.707M12 21v-1m-4.636-1.636l-.707.707M3 12H2m1.636-4.636l.707-.707M10 21h4a2 2 0 002-2V9a2 2 0 00-2-2h-4a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      View Machine Status
    </button>

    <!-- Tooltip Content -->
    <div
      id="tooltip-info"
      role="tooltip"
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 
             bg-gradient-to-br from-green-500 to-teal-600 text-white text-sm font-medium rounded-lg shadow-xl 
             whitespace-nowrap transition-all duration-300 ease-out 
             opacity-0 invisible 
             group-hover:opacity-100 group-hover:visible group-hover:-translate-y-2 
             group-focus-within:opacity-100 group-focus-within:visible group-focus-within:-translate-y-2 
             dark:from-green-700 dark:to-teal-800 
             sm:text-base"
    >
      
      <div class="relative flex items-center">
        <svg class="w-5 h-5 mr-2" 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="M9 12l2 2 4-4m5.618-4.756a4.898 4.898 0 011.041 3.565A6.003 6.003 0 0124 12c0 2.21-1.229 4.143-3.053 5.176l-1.921 1.921A8.96 8.96 0 0112 24c-2.868 0-5.514-.766-7.85-2.096l-1.921-1.921A6.003 6.003 0 010 12c0-2.21 1.229-4.143 3.053-5.176l1.921-1.921A8.96 8.96 0 0112 0c2.868 0 5.514.766 7.85 2.096l1.921 1.921A6.003 6.003 0 0124 12z"></path></svg>
        Machine #1789: Operating Normally

        <!-- Tail/Arrow for the Tooltip -->
        <svg class="absolute top-full left-1/2 -ml-2 w-4 h-4 text-green-600 dark:text-green-800 rotate-180 -mt-1" fill="currentColor" viewBox="0 0 24 24"><path d="M24 22h-24l12-12z"/></svg>
      </div>

    </div>
  </div>

</div>
              

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="max-w-md w-full rounded-2xl p-6 md:p-8
    bg-gray-100 shadow-xl-light dark:bg-gray-800 dark:shadow-xl-dark
    text-center border border-gray-200 dark:border-gray-700">

    <div class="mb-6">
      <svg class="mx-auto h-20 w-20 text-indigo-500 mb-4"
        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2
        drop-shadow-sm dark:drop-shadow-lg">Donation Successful!</h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Thank you for your generous contribution.
      </p>
    </div>

    <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed">
      Your support will make a significant impact on our cause and help us continue our vital work.
      We are deeply grateful for your kindness.
    </p>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-indigo-500 text-white font-semibold text-lg
        shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark
        hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        Share Your Impact
      </button>
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-gray-200 text-gray-700 font-semibold text-lg
        shadow-neumorphic-button-reverse-light dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-button-reverse-dark
        hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        View Receipt
      </button>
    </div>

  </div>

  <style>
    .shadow-xl-light {
      box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    }
    .dark .shadow-xl-dark {
      box-shadow: 10px 10px 20px #212121, -10px -10px 20px #3f3f3f;
    }

    .shadow-neumorphic-button-light {
      box-shadow: 6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #444444;
    }

    .shadow-neumorphic-button-reverse-light {
      box-shadow: inset 6px 6px 12px #9a9a9a, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-reverse-dark {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #444444;
    }
  </style>

</div>
              

                <div class="relative flex justify-center items-center font-sans dark:bg-gray-900 bg-gray-100 p-4">
  <div class="group relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center items-center w-full rounded-md border border-gray-400 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 dark:focus:ring-emerald-600 transition-all duration-300" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Sections
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!--
      Dropdown menu, show/hide based on menu state.

      Entering: "transition ease-out duration-100"
        From: "transform opacity-0 scale-95"
        To: "transform opacity-100 scale-100"
      Leaving: "transition ease-in duration-75"
        From: "transform opacity-100 scale-100"
        To: "transform opacity-0 scale-95"
    -->
    <div class="opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 duration-200 ease-out origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none transition-all" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">Latest News</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">Politics</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">Business</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">Technology</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">Opinion</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">Sports</a>
      </div>
    </div>
  </div>
</div>
              

                <footer class="bg-stone-50 text-stone-700 dark:bg-stone-900 dark:text-stone-300 py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="md:col-span-2 lg:col-span-2">
        <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-amber-600 dark:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9Fehmeda 9H3m9-9a9 9 0 00-9 9m-9-9h16.5a2.25 2.25 0 012.25 2.25v1.5a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V6.75a2.25 2.25 0 012.25-2.25H12" />
            </svg>
            <span class="block">AcmeCorp</span>
          </a>
        </h2>
        <p class="mt-4 text-stone-600 dark:text-stone-400 leading-relaxed max-w-sm">
          Building a sustainable future through innovative solutions and unwavering commitment to excellence.
        </p>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Facebook</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22h7.493c4.613-.755 8.167-4.508 8.167-9.879z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">LinkedIn</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Twitter</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.532A11.022 11.022 0 0022 5.92a10.847 10.847 0 01-3.148.815A4.771 4.771 0 0019.426 3.7c.905-.541 1.791-1.295 2.617-2.196a11.396 11.396 0 01-3.69 1.408A4.757 4.757 0 0015.65 0c-2.073 0-3.75 1.677-3.75 3.75 0 .296.033.583.092.86S10.59 5 10.3 5.485C6.591 2.502 3.82 1.34 1.75 0 1.258.463.81 1 0 1.636 1.748 3.064 3.728 4.095 5.922 4.095c-.352 2.25 1.096 4.3 3.322 4.764a4.57 4.57 0 01-2.148.069c.563 1.332 1.632 2.3 2.923 2.628a9.886 9.886 0 01-6.104 2.158c-.378 0-.756-.022-1.13-.067.8 2.25 2.474 3.996 4.744 4.558-.093 0-.187-.008-.28-.008-.43 0-.853-.024-1.28-.072C4.195 20.358 1.94 21.054 0 21.292a11.127 11.127 0 006 1.838c7.886 0 12.87-6.9 12.87-12.873 0-.196-.005-.39-.013-.585A8.67 8.67 0 0022 4.4z" /></svg></a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              About Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Our Services
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Portfolio
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              News & Blog
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Careers
            </a>
          </li>
        </ul>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Help Center
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              FAQs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Support Docs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Customer Stories
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Partnerships
            </a>
          </li>
        </ul>
      </div>

      <!-- Legal & Contact -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Legal & Contact</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Privacy Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Terms of Service
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Cookie Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Contact Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Site Map
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-12 border-t border-stone-200 dark:border-stone-700 pt-8 text-center text-sm text-stone-500 dark:text-stone-400">
      <p>&copy; <span id="current-year"></span> AcmeCorp. All rights reserved.</p>
      <p class="mt-2">Powered by Innovation. Built for the Future.</p>
    </div>
  </div>
</footer>

<script>
  // Dynamically set the current year for the copyright notice
  document.getElementById('current-year').textContent = new Date().getFullYear();

  // Basic dark mode toggle for demonstration (optional, often managed by a higher-level framework)
  // To make dark mode work, you'd typically have a button somewhere on your page
  // or rely on the user's system preferences with Tailwind's 'class' dark mode strategy.
  // This snippet is just to show the HTML output is ready for dark mode.
  // Example of a toggle (you'd need a button to trigger this):
  /*
  const htmlElement = document.documentElement;
  const isDarkMode = localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);

  if (isDarkMode) {
    htmlElement.classList.add('dark');
  } else {
    htmlElement.classList.remove('dark');
  }

  function toggleDarkMode() {
    if (htmlElement.classList.contains('dark')) {
      htmlElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      htmlElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  }
  */
</script>
              

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-900 text-white dark:from-gray-900 dark:to-black font-serif shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl font-bold tracking-wider uppercase text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out transform hover:scale-105">
      SaaSymmetry
    </a>
    
    <!-- Mobile Menu Button -->
    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-8 h-8 text-purple-200 dark:text-purple-400" 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>

    <!-- Desktop Menu (visible on md and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Features</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Analytics</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Automation</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Integrations</a>
        </div>
      </div>
      
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Solutions</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Enterprise</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Small Business</a>
        </div>
      </div>

      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Pricing</a>
      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Contact</a>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, can be toggled by JS) -->
  <!-- For a purely HTML/CSS solution, this would typically be hidden and revealed with a :checked pseudo-class on a hidden checkbox, 
       but that gets complex for nested menus without JS. This is illustrative for positioning. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 text-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Contact</a>
    </div>
  </div>
</nav>
              

                <nav class="flex justify-center px-4 py-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-xl rounded-b-3xl dark:from-gray-800 dark:via-gray-900 dark:to-black sm:px-6 md:px-8 lg:px-10 xl:px-12" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
        <svg class="w-5 h-5 mr-1 sm:mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        <span class="font-semibold text-sm sm:text-base">Home</span>
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Courses</span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Web Development</span>
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-1 sm:ml-2 text-yellow-100 font-bold drop-shadow-lg text-sm sm:text-base dark:text-orange-400">
          Mastering Tailwind CSS
        </span>
      </div>
    </li>
  </ol>
</nav>
              

                <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85 flex items-center justify-center p-4 z-50">
  <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all duration-300 ease-out scale-95 opacity-0 sm:scale-100 sm:opacity-100 border border-stone-400 dark:border-stone-700 overflow-hidden">
    <!-- Header -->
    <div class="bg-stone-300 dark:bg-stone-700 p-4 border-b border-stone-400 dark:border-stone-600 flex justify-between items-center">
      <h3 class="text-lg font-mono tracking-wide uppercase text-stone-800 dark:text-stone-200">Patient Details</h3>
      <button class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 p-1 rounded-full">
        <svg class="w-6 h-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Body -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      <div class="flex items-center space-x-4">
        <img class="w-16 h-16 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Patient Avatar">
        <div>
          <p class="font-semibold text-xl">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">ID: P102938</p>
        </div>
      </div>
      <p class="text-sm text-stone-800 dark:text-stone-200 leading-relaxed font-mono">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
        <div>
          <p class="font-medium">Age:</p>
          <p>45</p>
        </div>
        <div>
          <p class="font-medium">Blood Type:</p>
          <p>O+</p>
        </div>
        <div>
          <p class="font-medium">Last Visit:</p>
          <p>2023-10-26</p>
        </div>
        <div>
          <p class="font-medium">Status:</p>
          <p><span class="px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-yellow-700 text-white text-xs font-semibold">Stable</span></p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="bg-stone-300 dark:bg-stone-700 p-4 border-t border-stone-400 dark:border-stone-600 flex justify-end space-x-3">
      <button class="px-5 py-2 text-sm font-mono tracking-wide text-stone-700 dark:text-stone-300 bg-stone-400 dark:bg-stone-600 hover:bg-stone-500 dark:hover:bg-stone-500 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-300 dark:focus:ring-offset-stone-700">
        Close
      </button>
      <button class="px-5 py-2 text-sm font-mono tracking-wide text-white bg-amber-700 dark:bg-amber-800 hover:bg-amber-800 dark:hover:bg-amber-900 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-300 dark:focus:ring-offset-stone-700">
        View Record
      </button>
    </div>
  </div>
</div>
              

                <nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
  <ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
        Booking
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Select Service
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Choose Date & Time
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Confirm Details
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center">
      <span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
        Payment
      </span>
    </li>
  </ol>
</nav>
              

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900 overflow-hidden">
  <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-10">Global Climate Insights</h2>

  <div class="relative flex items-center justify-center">
    <button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
      <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" 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="M15 19l-7-7 7-7"></path>
      </svg>
    </button>

    <div class="w-full overflow-hidden">
      <div class="flex transition-transform duration-500 ease-in-out" style="transform: translateX(0%);">
        <!-- Slide 1 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1025/600/400" alt="Rainfall Pattern" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">HOT TOPIC</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Global Rainfall Patterns</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Analyzes the shifts in precipitation, highlighting regions susceptible to drought and flooding due to climate change.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>3,200 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>March 15, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Leo Thompson</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Climatologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1018/600/400" alt="Temperature Trends" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-teal-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">NEW RESEARCH</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Arctic Ice Melt Projections</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Examines the rapid melting of polar ice caps and its significant implications for global sea levels and ecosystems.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>5,100 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>Feb. 28, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Sofia Rossi</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Oceanographer</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1060/600/400" alt="Extreme Weather Events" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-cyan-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">FEATURED</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Frequency of Extreme Weather</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Investigates the rising occurrence of severe storms, heatwaves, and wildfires globally, linking them to changing climate.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>4,500 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>Jan. 20, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Prof. Clara Davies</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Meteorologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 4 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1029/600/400" alt="Ocean Acidification" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">URGENT</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Ocean Acidification Impacts</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Details the increasing acidity of oceans due to CO2 absorption and its devastating effects on marine life and coral reefs.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>6,800 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>Dec. 5, 2022</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. James Chen</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Marine Biologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
      <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" 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="M9 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>

  <div role="tablist" aria-label="Carousel pagination" class="flex justify-center mt-8 space-x-2">
    <button role="tab" aria-selected="true" aria-controls="slide-1" class="w-3 h-3 bg-cyan-600 dark:bg-cyan-400 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-2" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-3" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-4" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
  </div>
</div>