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 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.
Aller au lien de contenu
Un composant de lien « Aller au contenu » pour l’accessibilité, conçu pour les tableaux de bord en mode sombre avec une palette de couleurs en niveaux de gris. Il est modérément complexe en raison du style réactif et du mode sombre. Aucun JavaScript n’est utilisé. Utilise Tailwind CSS avec les préfixes dark : pour la prise en charge du thème sombre.
Aller au composant de lien de contenu
Glassmorphism Aller au contenu Lien présentant un effet de verre givré, le flou, la réactivité et la prise en charge du mode sombre à l’aide de Tailwind CSS, sans JavaScript.