跳至内容链接

一个跳到内容链接组件,按照材料设计原则进行样式设计,使用单色方案,并支持暗模式。适合电子商务网站,使用Tailwind CSS构建,无需JavaScript。

预览

HTML 代码

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

相关组件

跳至内容链接

用于辅助功能的“跳至内容”链接组件,专为具有灰度配色方案的深色模式仪表板而设计。由于响应式和深色模式样式,它比较复杂。不使用 JavaScript。使用带有 dark: 前缀的 Tailwind CSS 来支持深色主题。

打开

跳到内容链接组件

一个设计有3D元素和大地色调的跳转到内容链接组件,专为仪表板界面定制。它包含适用于明暗主题的样式。

打开

跳至内容链接组件

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

打开