组件 跳至内容链接 跳转到内容链接组件 - 立体感灰度

跳转到内容链接组件 - 立体感灰度

一个简单、响应式的 “跳到内容” 链接,带有灰度的拟物化设计,用于博客内容。包括深色模式支持。

预览

HTML 代码

<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>

<main id="main-content" class="p-4">
  <!-- Your main content goes here -->
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
  <p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>

相关组件

跳到内容链接

一个 Skip to Content Link 组件,具有适用于商业网站的 3D 灰度设计。它是响应式的,并支持使用 Tailwind CSS 的深色模式。无 JavaScript。

打开

跳至内容链接

一个3D设计风格的跳转至内容链接组件,采用大地色调的配色方案,适用于复杂度适中的电子商务。它包括响应式设计和黑暗主题支持。

打开

跳至内容链接组件

一个视觉上引人入胜的“跳到内容”链接组件,专为仪表板设计,侧重于微交互,通过 Tailwind CSS 利用互补配色方案和深色模式支持。

打开