跳至内容链接

一个响应式跳转到内容链接组件,采用拟物化风格和柔和的颜色方案。该组件适用于博客和内容消费,并支持黑暗模式。

预览

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>

相关组件

跳至内容链接组件

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

打开

跳至内容链接组件

一个提供跳转到主要内容链接的网页组件,采用材料设计风格,配有粉彩色彩方案,适用于电子商务网站。它具有响应式设计,并支持黑暗主题。

打开

跳至内容链接组件

一个简单、响应迅速的“跳到内容”链接组件,具有水彩/艺术风格、三色配色方案和农业/农业主题元素,支持深色模式。

打开