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

Glassmorphism Aller au lien vers le contenu

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

Ouvrir

Aller au composant de lien de contenu

Un composant Web qui fournit un lien « Passer au contenu » de style 3D avec des effets réactifs et la prise en charge du thème sombre, à l’aide de Tailwind CSS.

Ouvrir

Brutaliste Aller au lien vers le contenu (forêt/vert)

Un composant de lien brut et audacieux « Skip to Content » conçu dans un style brutaliste avec une palette de couleurs forêt/vert, adapté aux systèmes de réservation. Il est réactif et prend en charge le mode sombre.

Ouvrir