搜索组件

类别

组件跳到内容链接

跳到内容链接

跳过导航的无障碍链接

Skeuomorphic_Autumn_Skip_to_Content_Link

一个简单的拟物化“跳到内容”链接组件，采用秋季配色方案设计，适用于教育平台，通过深色模式支持提供可访问性和响应能力。

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:px-6 focus:py-3 focus:text-lg focus:shadow-lg focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-offset-orange-900 focus:ring-orange-800
    bg-gradient-to-br from-amber-700 to-orange-900 text-amber-50 rounded-xl
    border-t-2 border-l-2 border-r-4 border-b-4 border-amber-950
    shadow-[inset_0_3px_5px_rgba(255,255,255,0.2),inset_0_-3px_5px_rgba(0,0,0,0.3),0_6px_10px_rgba(0,0,0,0.4)]
    hover:from-amber-600 hover:to-orange-800
    active:from-amber-800 active:to-orange-950 active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.2)]
    transition-all duration-200 ease-out
    dark:from-amber-950 dark:to-orange-900 dark:text-amber-200
    dark:border-t-2 dark:border-l-2 dark:border-r-4 dark:border-b-4 dark:border-zinc-800
    dark:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.1),0_6px_10px_rgba(0,0,0,0.7)]
    dark:hover:from-amber-900 dark:hover:to-orange-800
    dark:active:from-amber-950 dark:active:to-orange-950 dark:active:shadow-[inset_0_3px_5px_rgba(255,255,255,0.1),inset_0_-3px_5px_rgba(0,0,0,0.3)]
    ">Skip to Main Content</a>
<main id="main-content" class="p-8 bg-orange-50 dark:bg-zinc-900 min-h-screen text-zinc-900 dark:text-zinc-100 flex flex-col justify-center items-center font-sans">
    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-orange-900 dark:text-orange-200 drop-shadow-md text-center">
        Welcome to Our Learning Platform
    </h1>
    <p class="text-xl md:text-2xl text-orange-800 dark:text-orange-300 mb-8 max-w-3xl text-center">
        Explore a world of knowledge and expand your horizons. This is placeholder content for the main section of your educational platform.
    </p>
    <img src="https://picsum.photos/seed/learn/800/450" alt="Autumn leaves and books" class="rounded-2xl shadow-xl border-4 border-amber-800 dark:border-amber-700 max-w-full h-auto mb-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course1/100/100" alt="Course thumbnail 1" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Course Title One</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Dive deep into the fundamentals of web development.</p>
        </div>
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course2/100/100" alt="Course thumbnail 2" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Interactive Design</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Learn to create engaging user experiences.</p>
        </div>
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course3/100/100" alt="Course thumbnail 3" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Data Science Basics</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Uncover insights with powerful data analysis.</p>
        </div>
    </div>
</main>

Retro_Industrial_Skip_Content

适用于工业和制造网站的复古/复古风格的“跳至内容”链接组件，具有 80 年代/90 年代的美学、互补配色方案（橙色/蓝绿色）和深色模式支持。此复杂组件包括交互式元素，可提供丰富的用户体验。

打开预览

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skip to Content Link</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'selector',
        theme: {
          extend: {
            colors: {
              'retro-orange': '#FF8C00',
              'retro-teal': '#008080',
              'retro-dark-bg': '#2C3E50',
              'retro-light-bg': '#ECF0F1',
              'retro-dark-text': '#BDC3C7',
              'retro-light-text': '#2C3E50'
            },
            fontFamily: {
              'mono-retro': ['"Roboto Mono"', 'monospace'],
              'sans-retro': ['"Press Start 2P"', 'cursive'] // For a more arcade look if needed, but mono for industrial feel
            }
          }
        }
      }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
      /* Custom styles for the skip link to ensure it's hidden until focused */
      .skip-link {
        position: absolute;
        left: -9999px;
        z-index: 100;
      }
      .skip-link:focus {
        left: 50%;
        transform: translateX(-50%);
        top: 1rem;
        padding: 0.75rem 1.5rem;
        background-color: theme('colors.retro-teal');
        color: theme('colors.retro-light-bg');
        text-decoration: none;
        border-radius: 0.5rem;
        outline: 2px solid theme('colors.retro-orange');
        outline-offset: 2px;
        transition: all 0.2s ease-in-out;
        font-family: theme('fontFamily.mono-retro');
        font-size: 0.875rem; /* sm */
        text-transform: uppercase;
        letter-spacing: 0.1em;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      /* Dark mode specific focus styles */
      html.dark .skip-link:focus {
        background-color: theme('colors.retro-orange');
        color: theme('colors.retro-dark-bg');
        outline-color: theme('colors.retro-teal');
        box-shadow: 0 4px 6px -1px rgba(255, 140, 0, 0.3), 0 2px 4px -1px rgba(255, 140, 0, 0.15);
      }

      /* Retro button hover effect */
      .retro-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06);
        filter: brightness(1.2);
      }
      html.dark .retro-button:hover {
        filter: brightness(0.8);
      }

      /* Retro glow for sections */
      .retro-glow {
        box-shadow: 0 0 15px rgba(0, 128, 128, 0.7);
      }
      html.dark .retro-glow {
        box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
      }
    </style>
</head>
<body class="bg-retro-light-bg text-retro-light-text font-mono-retro dark:bg-retro-dark-bg dark:text-retro-dark-text min-h-screen flex flex-col">

    <!-- Dark mode toggle for demonstration -->
    <button onclick="document.documentElement.classList.toggle('dark')" class="fixed top-4 right-4 z-50 p-3 rounded-full bg-retro-teal text-retro-light-bg dark:bg-retro-orange dark:text-retro-dark-bg focus:outline-none focus:ring-4 focus:ring-retro-orange dark:focus:ring-retro-teal transition-colors duration-300 shadow-md retro-button">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path class="dark:hidden" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
            <path class="hidden dark:block" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 2.828a1 1 0 01.707 1.707l-1 1a1 1 0 11-1.414-1.414l1-1A1 1 0 0114 4.828zM17 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zm8.293 4.293a1 1 0 01-1.414 0l-1-1a1 1 0 011.414-1.414l1 1a1 1 0 010 1.414zM10 15a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm-4.293-1.293a1 1 0 010-1.414l-1-1a1 1 0 011.414-1.414l1 1a1 1 0 010 1.414zM16 10c0 3.313-2.687 6-6 6s-6-2.687-6-6 2.687-6 6-6 6 2.687 6 6z"></path>
        </svg>
    </button>

    <!-- Main Navigation/Header -->
    <header class="bg-gray-800 dark:bg-gray-900 text-retro-light-bg py-4 px-6 md:px-10 shadow-lg relative z-20 retro-glow">
        <a href="#main-content" class="skip-link z-50">Skip to Main Content</a>
        <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
            <div class="flex items-center space-x-4 mb-4 md:mb-0">
                <img src="https://picsum.photos/id/237/50/50" alt="Industrial Logo" class="rounded-full border-2 border-retro-orange dark:border-retro-teal">
                <h1 class="text-2xl md:text-3xl font-sans-retro text-retro-orange dark:text-retro-teal tracking-wide">
                    <a href="#" class="hover:text-retro-light-bg transition-colors duration-200">TECHNO-WORKS INC.</a>
                </h1>
            </div>
            <nav aria-label="Primary Navigation">
                <ul class="flex flex-wrap justify-center md:space-x-8 space-x-4 text-sm md:text-base font-mono-retro">
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Products</a></li>
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Services</a></li>
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">About Us</a></li>
                    <li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Main Content Area -->
    <main id="main-content" tabIndex="-1" class="flex-grow container mx-auto px-4 py-8 md:py-16 focus:outline-none focus:ring-4 focus:ring-retro-orange dark:focus:ring-retro-teal focus:ring-offset-8 focus:rounded-lg transition-all duration-300">
        <h2 class="text-3xl md:text-4xl font-sans-retro text-center mb-8 text-retro-teal dark:text-retro-orange">Operational Overview: Data Stream</h2>

        <section class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <!-- System Status Card -->
            <div class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg p-6 rounded-lg shadow-xl border-4 border-retro-orange dark:border-retro-teal transition-all duration-300 retro-glow">
                <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-light-bg dark:border-retro-dark-bg pb-2">System Status: <span class="text-green-300 dark:text-green-700 font-bold">ONLINE</span></h3>
                <p class="mb-3">Unit 001-A: <span class="font-bold">Active</span></p>
                <p class="mb-3">Unit 001-B: <span class="font-bold">Active</span></p>
                <p class="mb-3">Sensor Array: <span class="font-bold text-yellow-300 dark:text-yellow-700">Minor Anomaly Detected</span></p>
                <button class="mt-4 w-full bg-retro-orange dark:bg-retro-dark-bg text-retro-light-bg dark:text-retro-orange py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-light-bg focus:outline-none focus:ring-2 focus:ring-retro-light-bg dark:focus:ring-retro-orange">
                    View Diagnostics
                </button>
            </div>

            <!-- Recent Activity Log (List) -->
            <div class="lg:col-span-2 bg-retro-light-bg dark:bg-gray-800 text-retro-light-text dark:text-retro-dark-text p-6 rounded-lg shadow-xl border-4 border-retro-teal dark:border-retro-orange transition-all duration-300 retro-glow">
                <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-teal dark:border-retro-orange pb-2">Recent Activity Log</h3>
                <ul class="space-y-4">
                    <li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
                        <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Operator John Doe" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
                        <p><strong>[14:32:01]</strong> Operator John D. initiated <span class="text-retro-teal dark:text-retro-orange font-bold">System Cal. 3</span>.</p>
                    </li>
                    <li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
                        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Tech Jane Smith" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
                        <p><strong>[14:28:45]</strong> Tech Jane S. performed <span class="text-retro-teal dark:text-retro-orange font-bold">Data Backup R-7</span>.</p>
                    </li>
                    <li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
                        <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Supervisor Mark Johnson" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
                        <p><strong>[14:15:20]</strong> Supervisor Mark J. approved <span class="text-retro-teal dark:text-retro-orange font-bold">Phase II Deployment</span>.</p>
                    </li>
                </ul>
            </div>
        </section>

        <!-- Operational Data Section -->
        <section class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg p-6 rounded-lg shadow-xl border-4 border-retro-orange dark:border-retro-teal transition-all duration-300 retro-glow">
            <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-light-bg dark:border-retro-dark-bg pb-2">Real-time Sensor Readings</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Temperature:</p>
                    <p class="text-xl">28.5 °C</p>
                </div>
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Pressure:</p>
                    <p class="text-xl">1012 hPa</p>
                </div>
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Humidity:</p>
                    <p class="text-xl">65%</p>
                </div>
                <div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
                    <p class="text-lg font-bold">Vibration:</p>
                    <p class="text-xl text-red-400 dark:text-red-700">HIGH</p>
                </div>
            </div>
            <button class="mt-6 w-full md:w-auto bg-retro-light-bg dark:bg-gray-700 text-retro-teal dark:text-retro-orange py-2 px-6 rounded transition-all duration-300 retro-button border-2 border-retro-orange dark:border-retro-teal focus:outline-none focus:ring-2 focus:ring-retro-light-bg dark:focus:ring-retro-orange">
                Request Full Data Log
            </button>
        </section>

        <!-- Placeholder Content to Demonstrate Scrolling -->
        <section class="mt-16 bg-retro-light-bg dark:bg-gray-800 text-retro-light-text dark:text-retro-dark-text p-6 rounded-lg shadow-xl border-4 border-retro-teal dark:border-retro-orange transition-all duration-300 retro-glow">
            <h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-teal dark:border-retro-orange pb-2">Production Metrics Analytics</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <img src="https://picsum.photos/600/400?random=1" alt="Production Chart" class="w-full h-auto rounded-lg mb-4 border-2 border-retro-orange mx-auto">
                    <p class="mb-4">Detailed analysis of Unit 003's output efficiency over the last 24 hours, showing a 5% increase in throughput after last night's maintenance cycle.</p>
                    <button class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-dark-bg focus:outline-none focus:ring-2 focus:ring-retro-orange dark:focus:ring-retro-teal">
                        Generate Report
                    </button>
                </div>
                <div>
                    <img src="https://picsum.photos/600/400?random=2" alt="Maintenance Schedule" class="w-full h-auto rounded-lg mb-4 border-2 border-retro-orange mx-auto">
                    <p class="mb-4">Upcoming routine maintenance schedule for Q3, including major system upgrades for network infrastructure and power distribution units. Contingency plans are in place.</p>
                    <button class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-dark-bg focus:outline-none focus:ring-2 focus:ring-retro-orange dark:focus:ring-retro-teal">
                        Update Schedule
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="mt-auto bg-gray-800 dark:bg-gray-900 text-retro-dark-text py-6 px-4 md:px-10 text-center text-sm font-mono-retro shadow-inner retro-glow">
        <div class="container mx-auto">
            <p>&copy; 2023 TECHNO-WORKS INC. All Rights Reserved. // Industrial Solutions Since '86</p>
            <nav class="mt-4">
                <ul class="flex flex-wrap justify-center space-x-4 md:space-x-8">
                    <li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Privacy Policy</a></li>
                    <li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Terms of Service</a></li>
                    <li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Sitemap</a></li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>

跳至内容链接组件

一个简单、响应迅速的“跳到内容”链接组件，具有水彩/艺术风格、三色配色方案和农业/农业主题元素，支持深色模式。

打开预览

                <div class="bg-green-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans relative">
  <!-- Skip to Content Link -->
  <a href="#main-content" class="
      absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 mt-2
      bg-yellow-600 text-white rounded-md shadow-lg
      focus:translate-y-0 focus:z-50
      transition-transform duration-300 ease-out
      text-sm sm:text-base
      dark:bg-yellow-700 dark:text-gray-100
      border-2 border-transparent focus:border-green-800 dark:focus:border-green-300
      font-bold tracking-wide
    ">Skip to Main Content</a>

  <!-- Main content area (example) -->
  <main id="main-content" class="
      bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10
      max-w-4xl w-full text-center
      border-t-8 border-yellow-500 dark:border-yellow-600
      relative overflow-hidden
    ">
    <!-- Artistic element: Subtle green watercolor splash -->
    <div class="
        absolute top-0 left-0 w-full h-full
        bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-100/50 to-transparent
        dark:from-green-900/30 dark:to-transparent
        pointer-events-none
        opacity-70 dark:opacity-50
      "></div>
    <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Harvesting Growth, Nurturing Nature
    </h1>
    <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 sm:mb-8 max-w-2xl mx-auto leading-relaxed">
      Welcome to our agricultural hub. We cultivate innovation and sustainable practices,
      bringing forth the bounty of the earth.
    </p>
    <img src="https://picsum.photos/seed/agriculture/800/450" alt="Agricultural field at sunset" class="rounded-lg shadow-md mb-6 sm:mb-8 w-full h-auto object-cover">
    <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed">
      Our commitment extends from seed to harvest, ensuring quality and fostering a thriving ecosystem.
      Explore our offerings below.
    </p>
    <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
      <button class="
        bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-blue-700 dark:hover:bg-blue-800
        border-2 border-transparent hover:border-blue-800 dark:hover:border-blue-300
        relative overflow-hidden
      ">
        <span class="relative z-10">Learn More</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
      <button class="
        bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-green-800 dark:hover:bg-green-900
        border-2 border-transparent hover:border-green-900 dark:hover:border-green-400
        relative overflow-hidden
      ">
        <span class="relative z-10">Our Products</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
    </div>
  </main>
</div>

跳至内容链接组件

一个中构的“跳到内容”链接组件，用于技术/SaaS 应用程序中的可访问性，具有紫色/紫色配色方案和完全响应能力，支持深色模式。

打开预览

                <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:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a148c,
                -6px -6px 12px #9c27b0;
  }
</style>

跳至内容链接组件

一个简单、可访问的跳到内容链接组件，专为旅行/旅游网站设计，具有棕褐色/棕色配色方案和深色模式支持，以减少眼睛疲劳。

打开预览

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

跳至内容链接组件

一个用于 CRM/业务工具的简单、单色、受自然启发的“跳到内容”链接组件，通过深色模式支持确保可访问性和响应能力。

打开预览

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

Glassmorphism 跳至内容链接

Glassmorphism 跳至具有 Earth Tones for Dashboard 的内容链接组件。

打开预览

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