Components Skip to Content Link Skip to Content Link Component

Skip to Content Link Component

A Skip to Content Link component designed with 3D elements, earth tones, and tailored for dashboard interfaces. It includes styles for both light and dark themes.

Preview

HTML Code

<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>

Related Components

Retro_Industrial_Skip_Content

A retro/vintage styled 'skip to content' link component for industrial and manufacturing websites, featuring 80s/90s aesthetics, a complementary color scheme (orange/teal), and dark mode support. This complex component includes interactive elements for a rich user experience.

Open

SkipToContentLink

Skip to Content Link Component with Dark Mode UI, Triadic color scheme, and Simple complexity for E-commerce.

Open

Skip to Content Link Component

Glassmorphism Skip to Content Link featuring a frosted glass effect, blur, responsiveness, and dark mode support using Tailwind CSS, with no JavaScript.

Open