组件 跳至内容链接 跳到内容链接组件

跳到内容链接组件

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

预览

HTML 代码

<div class="flex flex-col gap-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <a href="#content" class="flex items-center justify-center h-12 px-4 font-medium text-white bg-brown-700 rounded-full shadow-md dark:bg-green-600 hover:bg-brown-600 dark:hover:bg-green-500 transition duration-300">
        Skip to Content
    </a>
    <p class="text-gray-800 dark:text-gray-300">
        Use this link to quickly navigate to the main content of the dashboard.
    </p>
    <img src="https://picsum.photos/200/100" alt="Dashboard Image" class="rounded-lg shadow-md" />
    <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" />
        <span class="text-gray-800 dark:text-gray-300">User: John Doe</span>
    </div>
</div>

相关组件

跳到内容链接组件

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

打开

跳至内容链接组件

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

打开

跳至内容链接

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

打开