组件 跳至内容链接 跳至内容链接 - 复古单色

跳至内容链接 - 复古单色

跳过内容链接组件,具有复古/怀旧设计,单色调色方案和简单复杂性。

预览

HTML 代码

```html
<a href="#main-content" class="sr-only focus:not-sr-only fixed z-50 top-4 left-4 bg-stone-800 text-stone-100 px-6 py-3 rounded-md text-lg font-mono tracking-wide uppercase focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75 dark:bg-stone-100 dark:text-stone-800 dark:focus:ring-stone-400">
  Skip to Content
</a>

<div id="main-content" class="focus:outline-none" tabindex="-1">
  <!-- Page content goes here -->
</div>
```

相关组件

跳转到内容链接

响应式“跳到内容”链接组件,采用 Glassmorphism 设置样式,实现互补配色方案、适度复杂性和深色模式支持,适用于商业/公司网站。此组件完全使用 Tailwind CSS 类在 HTML 中实现,不需要 JavaScript。

打开

跳至内容链接

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

打开

跳至内容链接

跳到内容链接组件,具有 Neumorphism 设计样式、三元配色方案以及适用于博客和内容网站的复杂布局。它包括响应式设计和使用 Tailwind CSS 的深色模式支持。

打开