Aller au composant de lien de contenu
Un composant de lien « Passer au contenu » visuellement attrayant conçu pour les tableaux de bord en mettant l’accent sur les micro-interactions, utilisant un schéma de couleurs complémentaire et la prise en charge du mode sombre via Tailwind CSS.
HTML Code
<div class="relative">
<a href="#content" class="skip-to-content block p-4 text-white bg-blue-500 transition-opacity duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-pink-400">
Skip to Content
</a>
<div class="absolute top-0 left-0 p-2 mt-2 rounded-md bg-gray-800 dark:bg-gray-900">
<p class="text-sm text-gray-300 dark:text-gray-200">Press <span class="font-semibold">Tab</span> to focus on the link and skip to the main content.</p>
</div>
</div>
<div id="content" class="mt-10 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard Content</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
<p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 1</p>
</div>
<div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
<p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 2</p>
</div>
</div>
</div>Composants associés
Aller au lien de contenu
Un composant de lien réactif « Skip to Content » stylisé avec Glassmorphism, mettant en œuvre un schéma de couleurs complémentaire, une complexité modérée et une prise en charge du mode sombre adapté aux sites Web d’entreprise. Ce composant est implémenté uniquement en HTML avec les classes CSS Tailwind, ne nécessitant aucun JavaScript.
Retro_Industrial_Skip_Content
Un composant de lien de style rétro/vintage pour les sites Web industriels et de fabrication, avec une esthétique des années 80/90, une palette de couleurs complémentaire (orange/sarcelle) et la prise en charge du mode sombre. Ce composant complexe comprend des éléments interactifs pour une expérience utilisateur riche.
Aller au composant de lien de contenu
Un lien Skip to Content de style 3D visuellement attrayant qui aide les utilisateurs à contourner les menus de navigation sur une interface de réseau social. Le composant utilise une palette de couleurs complémentaires (bleu et orange) avec un effet 3D obtenu par des ombres et des transformations. Dispose d’un design réactif et d’un support de thème sombre. Le lien apparaît fixe en haut à gauche de la fenêtre d’affichage lorsqu’il est activé ou actif, ce qui le rend facilement accessible pour la navigation au clavier tout en restant discret lorsqu’il n’est pas utilisé.