Zum Inhaltslink springen

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen flex items-start justify-center p-4 sm:p-6 lg:p-8 relative font-sans">

  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:bg-amber-700/90 focus:text-stone-50 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-all duration-300 ease-in-out dark:focus:bg-amber-800/90 dark:focus:text-stone-100">
    Skip to main content
  </a>

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 rounded-lg shadow-xl p-6 sm:p-8 lg:p-10 text-stone-800 dark:text-stone-200 ring-1 ring-stone-200 dark:ring-stone-700">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-amber-800 dark:text-amber-500 mb-6 sm:mb-8 text-center">
      Your Travel Destination
    </h1>
    <p class="text-lg leading-relaxed mb-8 text-center text-stone-600 dark:text-stone-300">
      Explore breathtaking landscapes and vibrant cultures. Start your adventure now!
    </p>

    <img src="https://picsum.photos/seed/travel/800/450" alt="Scenic travel destination" class="w-full h-auto rounded-lg shadow-md mb-8 object-cover">

    <section id="main-content" tabindex="-1" class="outline-none focus:ring-2 focus:ring-amber-500 focus:rounded-md focus:p-2 -m-2">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-amber-700 dark:text-amber-400">Discover Serenity</h2>
      <p class="mb-6 text-stone-700 dark:text-stone-300">
        Nestled amidst ancient hills and whispering rivers, this destination offers an unparalleled escape from the mundane. Immerse yourself in the rich tapestry of local traditions, savor exquisite cuisine, and embark on thrilling excursions.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-stone-100 dark:bg-stone-700 p-4 rounded-md shadow-sm">
          <h3 class="font-semibold text-lg mb-2 text-amber-800 dark:text-amber-400">Activities</h3>
          <ul class="list-disc list-inside text-stone-700 dark:text-stone-300">
            <li>Guided hiking tours</li>
            <li>Cultural workshops</li>
            <li>River cruises</li>
            <li>Local market visits</li>
          </ul>
        </div>
        <div class="bg-stone-100 dark:bg-stone-700 p-4 rounded-md shadow-sm">
          <h3 class="font-semibold text-lg mb-2 text-amber-800 dark:text-amber-400">Accommodation</h3>
          <p class="text-stone-700 dark:text-stone-300">
            From cozy eco-lodges to luxurious resorts, find your perfect stay. All options blend seamlessly with the natural beauty.
          </p>
        </div>
      </div>
      <p class="text-base text-stone-600 dark:text-stone-400">
        Plan your dream vacation today and create memories that will last a lifetime.
      </p>
    </section>
  </div>
</div>
              

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:text-lg focus:font-extrabold focus:uppercase focus:tracking-wider focus:bg-emerald-600 focus:text-lime-50 focus:ring-4 focus:ring-lime-300 focus:ring-offset-4 focus:ring-offset-emerald-900 dark:focus:bg-emerald-800 dark:focus:text-lime-200 dark:focus:ring-lime-600 dark:focus:ring-offset-emerald-950 dark:focus:ring-offset-8 transition-all duration-300 ease-in-out">Skip to Main Content</a>
<main id="main-content" class="min-h-screen bg-lime-50 text-emerald-900 dark:bg-emerald-950 dark:text-lime-50 p-8 container mx-auto flex items-center justify-center">
  <h1 class="text-4xl md:text-6xl font-black uppercase tracking-widest text-center leading-tight">Main Booking Content Starts Here</h1>
</main>
              

                <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>
              

                <header class="bg-white py-4 shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:left-1/2 focus:-translate-x-1/2 focus:top-4 focus:z-50 px-4 py-2 bg-black text-white dark:bg-white dark:text-black rounded-md text-sm font-semibold tracking-tight uppercase focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white transition-colors duration-200">
    Skip to Main Content
  </a>
  <nav class="container mx-auto px-4 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-900 dark:text-white uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">AthleticPulse</a>
    </div>
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Workout Plans</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Nutrition Guides</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Team Stats</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Classes</a></li>
    </ul>
    <button class="md:hidden flex items-center p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white rounded-md" aria-label="Open menu">
      <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="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </nav>
</header>

<main id="main-content" class="container mx-auto px-4 py-12 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-screen">
  <h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-black dark:text-white uppercase tracking-tighter leading-tight">
    Unleash Your Full Potential
  </h1>
  <p class="text-lg md:text-xl leading-relaxed mb-8 max-w-3xl">
    Welcome to AthleticPulse – your ultimate destination for achieving peak physical performance. Explore our expertly crafted workout plans, comprehensive nutrition guides, and real-time team statistics.
  </p>
  <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=1" alt="Workout Plan" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Strength Training</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Build muscle and increase power with our tailored strength programs.</p>
    </div>
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=2" alt="Nutrition Guide" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Balanced Diet</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Fuel your body right with our expert nutrition advice and meal plans.</p>
    </div>
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=3" alt="Team Stats" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Performance Tracking</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Monitor your team's progress and individual achievements.</p>
    </div>
  </section>

  <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white uppercase tracking-tight">Latest Updates</h2>
      <ul class="space-y-4">
          <li class="flex items-start">
              <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
                  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
              </div>
              <div>
                  <p class="text-gray-800 dark:text-gray-200 font-semibold">New Speed Training Module Launched!</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Our new module focuses on agility drills and explosive power. Available now.</p>
              </div>
          </li>
           <li class="flex items-start">
              <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
                  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-full h-full object-cover">
              </div>
              <div>
                  <p class="text-gray-800 dark:text-gray-200 font-semibold">March Fitness Challenge Winners Announced!</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">A huge congratulations to all participants. Check your dashboard for insights.</p>
              </div>
          </li>
      </ul>
  </div>
</main>

<footer class="bg-black text-white dark:bg-gray-950 py-6 mt-12">
  <div class="container mx-auto px-4 text-center text-sm font-medium uppercase tracking-tight">
    &copy; 2023 AthleticPulse. All rights reserved.
  </div>
</footer>
              

                <!DOCTYPE html>
<html lang="en" class="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skip to Content Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            pastelPink: '#FFD1DC',
            pastelBlue: '#AEC6CF',
            pastelGreen: '#77DD77',
            pastelYellow: '#FDFD96',
            pastelPurple: '#B39EB5',
            darkBg: '#1A202C',
            darkText: '#E2E8F0',
            darkAccent: '#6B46C1'
          },
          fontFamily: {
            'retro': ['"Press Start 2P"', 'cursive'],
            'monospace': ['"Roboto Mono"', 'monospace'],
            'sans': ['"Arial"', 'sans-serif'] // Fallback or main body font
          },
          boxShadow: {
            'retro-neon': '0 0 10px rgba(255, 209, 220, 0.7), 0 0 20px rgba(255, 209, 220, 0.5), 0 0 30px rgba(255, 209, 220, 0.3)',
            'retro-inset': 'inset 0 0 5px rgba(0,0,0,0.2)'
          }
        }
      }
    }
  </script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&display=swap');

    /* Base styles for the component */
    .skip-link {
      @apply absolute -top-96 left-1/2 -translate-x-1/2 p-3 font-semibold text-center text-lg rounded-lg border-2 border-transparent transition-all duration-300 ease-in-out z-50;
      /* Default to a subtle look */
      @apply bg-pastelGreen text-gray-800 border-pastelYellow dark:bg-darkAccent dark:text-darkText dark:border-darkText;
      /* Retro specific styling */
      font-family: 'Roboto Mono', monospace; /* More readable for the actual link */
    }

    .skip-link:focus {
      @apply top-4 sm:top-6 md:top-8 shadow-lg outline-none;
      /* Retro focus effects */
      @apply bg-pastelRed transform scale-105 border-pastelPink shadow-retro-neon;
      @apply dark:bg-darkAccent dark:border-pastelPink dark:shadow-retro-neon;
    }

    /* Simulate page content for demonstration */
    #main-content {
      @apply p-8 mt-16 sm:mt-24 md:mt-32 mx-auto max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl;
      @apply text-gray-800 dark:text-gray-200;
      font-family: 'sans', sans-serif;
    }

    .dark-mode-toggle {
      @apply fixed bottom-4 right-4 p-3 rounded-full bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 shadow-lg cursor-pointer z-50;
    }
  </style>
</head>
<body class="bg-pastelBlue dark:bg-darkBg min-h-screen flex flex-col items-center justify-center transition-colors duration-300">

  <a href="#main-content" class="skip-link" role="link" aria-label="Skip to main content of the page">
    SKIP TO CONTENT
  </a>

  <header class="w-full bg-pastelPink dark:bg-darkBg text-pastelYellow dark:text-darkText py-4 shadow-md z-10 relative">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <h1 class="text-2xl sm:text-3xl font-retro text-pastelGreen dark:text-pastelYellow tracking-wide">
        CORPORATE <span class="hidden sm:inline">SYSTEM</span>
      </h1>
      <nav class="hidden md:flex space-x-6">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Products</a></li>
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Services</a></li>
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <h2 class="text-3xl sm:text-4xl font-retro mb-6 text-center text-pastelGreen dark:text-pastelYellow tracking-wide">Welcome to Our Corporate Portal</h2>
    <p class="mb-4 text-justify leading-relaxed text-gray-700 dark:text-gray-300">
      Embrace the future with our cutting-edge solutions designed to elevate your business. We combine innovative technology with timeless principles to deliver unparalleled results. Our commitment to excellence ensures that every project, big or small, is handled with precision and care.
    </p>
    <p class="mb-4 text-justify leading-relaxed text-gray-700 dark:text-gray-300">
      Explore our diverse range of services, from digital transformation strategies to bespoke software development. Our team of seasoned professionals is dedicated to empowering your success in an ever-evolving market. We believe in building lasting relationships through trust and exceptional service.
    </p>
    <img src="https://picsum.photos/seed/corporate1/800/400" alt="Modern office space with collaborative work" class="w-full h-auto rounded-lg mb-6 shadow-md object-cover">
    <h3 class="text-2xl sm:text-3xl font-retro mb-4 text-pastelPurple dark:text-pastelPink">Our Core Values</h3>
    <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300">
      <li>Innovation & Adaptability: Constantly evolving to meet market demands.</li>
      <li>Integrity & Transparency: Building trust through honest communication.</li>
      <li>Customer Centricity: Prioritizing client needs and satisfaction.</li>
      <li>Excellence in Execution: Delivering high-quality results every time.</li>
    </ul>
    <div class="mt-8 text-center">
      <a href="#" class="inline-block px-8 py-3 bg-pastelGreen text-gray-900 border-2 border-pastelYellow rounded-lg text-lg font-monospace shadow-md hover:bg-pastelYellow hover:text-white transform transition-all duration-300 ease-in-out dark:bg-darkAccent dark:text-darkText dark:border-darkText dark:hover:bg-pastelPink dark:hover:border-pastelPink">
        Learn More
      </a>
    </div>
  </main>

  <button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>

</body>
</html>
              

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:p-3 focus:rounded-lg focus:bg-white focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg focus:text-stone-800 dark:focus:bg-stone-800 dark:focus:bg-opacity-30 dark:focus:text-stone-200">Skip to main content</a>
              

                <template>
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-purple-900 focus:text-lime-300 focus:p-3 focus:border-b-4 focus:border-cyan-400 dark:focus:bg-purple-900 dark:focus:text-lime-300 dark:focus:border-cyan-400">Skip to main content</a>
</template>
              

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-pink-500 focus:text-white focus:p-3 focus:rounded-lg focus:z-50 dark:focus:bg-purple-700 dark:focus:text-yellow-300">Skip to main content</a>
              

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-1/2 focus:-translate-x-1/2 focus:bg-gray-800 focus:text-white focus:px-4 focus:py-2 focus:rounded-b-lg focus:z-50 dark:focus:bg-gray-100 dark:focus:text-gray-900">Skip to main content</a>
              

                <div class="relative">
    <a href="#content" class="skip-to-content block p-4 text-white bg-blue-500 transition-opacity duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-pink-400">
        Skip to Content
    </a>
    <div class="absolute top-0 left-0 p-2 mt-2 rounded-md bg-gray-800 dark:bg-gray-900">
        <p class="text-sm text-gray-300 dark:text-gray-200">Press <span class="font-semibold">Tab</span> to focus on the link and skip to the main content.</p>
    </div>
</div>
<div id="content" class="mt-10 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard Content</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 1</p>
        </div>
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 2</p>
        </div>
    </div>
</div>