Composants Aller au lien de contenu Aller au composant de lien de contenu

Aller au composant de lien de contenu

Un composant Skip to Content Link conçu avec des éléments 3D, des tons de terre et adapté aux interfaces de tableau de bord. Il comprend des styles pour les thèmes clairs et sombres.

Aperçu

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>

Composants associés

SkipToContentLink

Passer à Composant de lien de contenu avec interface utilisateur en mode sombre, schéma de couleurs triadique et complexité simple pour le commerce électronique.

Ouvrir

Glassmorphism Aller au lien vers le contenu

Glassmorphism Aller au contenu Lier le composant avec Earth Tones pour le tableau de bord.

Ouvrir

Skeuomorphic_Autumn_Skip_to_Content_Link

Un composant de lien simple et skeuomorphe « Passer au contenu » conçu avec une palette de couleurs d’automne, adapté aux plateformes éducatives, offrant accessibilité et réactivité avec la prise en charge du mode sombre.

Ouvrir