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

跳到内容链接组件

一个设计有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>

相关组件

跳至内容链接组件

一个用于 CRM/业务工具的简单、单色、受自然启发的“跳到内容”链接组件,通过深色模式支持确保可访问性和响应能力。

打开

Skeuomorphic_Autumn_Skip_to_Content_Link

一个简单的拟物化“跳到内容”链接组件,采用秋季配色方案设计,适用于教育平台,通过深色模式支持提供可访问性和响应能力。

打开

Glassmorphism 跳至内容链接

Glassmorphism 跳至具有 Earth Tones for Dashboard 的内容链接组件。

打开