HTML 代码
<a href="#main-content" class="flex items-center justify-center p-4 rounded-full shadow-md bg-gray-200 dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105 sm:bg-pink-200 md:bg-blue-200 lg:bg-green-200 dark:sm:bg-pink-800 dark:md:bg-blue-800 dark:lg:bg-green-800">
<img src="https://picsum.photos/20" alt="Scroll down icon" class="mr-3">
<span class="text-gray-800 dark:text-gray-200 font-semibold">Skip to Content</span>
</a>
<div id="main-content" class="mt-10 p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Welcome to Our Blog</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Here you will find various articles and content for your reading pleasure. Enjoy your stay!</p>
</div>相关组件
跳至内容链接
用于辅助功能的“跳至内容”链接组件，专为具有灰度配色方案的深色模式仪表板而设计。由于响应式和深色模式样式，它比较复杂。不使用 JavaScript。使用带有 dark： 前缀的 Tailwind CSS 来支持深色主题。
跳转到内容链接
响应式“跳到内容”链接组件，采用 Glassmorphism 设置样式，实现互补配色方案、适度复杂性和深色模式支持，适用于商业/公司网站。此组件完全使用 Tailwind CSS 类在 HTML 中实现，不需要 JavaScript。