跳到内容链接

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

预览

HTML 代码

<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-0 a-3 focus:left-0 focus:z-50 block px-4 py-3 text-lg font-semibold text-gray-800 bg-gray-200 border-b-4 border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-300 dark:focus:ring-gray-300">Skip to main content</a>

相关组件

跳至内容链接组件

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

打开

跳到内容链接组件

一个设计有拟物化元素类似于物理按钮的跳转到内容链接组件。该组件将采用柔和的色彩方案，适中的复杂性，包括悬停效果，并支持黑暗主题。

打开

野兽派跳至内容链接（森林/绿色）

一个原始、大胆的“跳到内容”链接组件，采用野兽派风格设计，带有森林/绿色调色板，适用于预订/预订系统。它响应式并支持深色模式。

打开