Zur Inhaltslink-Komponente springen

<div class="relative min-h-[100px] flex items-center justify-center bg-emerald-50 dark:bg-emerald-950 p-4 overflow-hidden rounded-lg shadow-inner sm:p-6 lg:p-8">
  <!-- Background elements mimicking organic flow -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-emerald-200 dark:bg-emerald-700 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
    <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-emerald-300 dark:bg-emerald-600 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-emerald-100 dark:bg-emerald-800 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
  </div>

  <a href="#main-content" class="
      sr-only focus:not-sr-only 
      absolute top-4 left-4 z-50 
      px-6 py-3 
      bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-600
      dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:bg-emerald-700
      text-white dark:text-emerald-50
      text-lg font-semibold 
      rounded-full 
      shadow-lg hover:shadow-xl focus:shadow-xl
      transition-all duration-300 ease-in-out 
      transform hover:scale-105 focus:scale-105
      border-2 border-emerald-400 dark:border-emerald-500
      outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800 focus:ring-opacity-75
  ">
    Skip to Main Content
  </a>

  <!-- Main content area to skip to -->
  <div id="main-content" tabindex="-1" class="relative z-10 p-8 m-auto bg-emerald-100 dark:bg-emerald-900 rounded-lg shadow-xl text-center max-w-sm sm:max-w-md lg:max-w-lg">
    <h2 class="text-2xl sm:text-3xl font-bold text-emerald-800 dark:text-emerald-100 mb-4 tracking-tight">Welcome to Our CRM</h2>
    <p class="text-emerald-700 dark:text-emerald-200 text-sm sm:text-base leading-relaxed">
      This is the main content area. Using the 'Skip to Main Content' link allows users to bypass repetitive navigation elements and jump directly here.
    </p>
    <img src="https://picsum.photos/400/200?random=1" alt="Placeholder image for main content" class="w-full h-auto rounded-lg mt-6 shadow-md border border-emerald-200 dark:border-emerald-800">
  </div>

  <!-- Custom animation keyframes for organic blob effect -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
</div>