Aller au lien de contenu
Un composant réactif Skip to Content Link conçu dans un style skeuomorphe avec une palette de couleurs pastel. Ce composant est destiné à la consommation de blog et de contenu, et inclut la prise en charge du mode sombre.
HTML Code
<a href="#main-content" class="flex items-center justify-center p-4 rounded-full shadow-md bg-gray-200 dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105 sm:bg-pink-200 md:bg-blue-200 lg:bg-green-200 dark:sm:bg-pink-800 dark:md:bg-blue-800 dark:lg:bg-green-800">
<img src="https://picsum.photos/20" alt="Scroll down icon" class="mr-3">
<span class="text-gray-800 dark:text-gray-200 font-semibold">Skip to Content</span>
</a>
<div id="main-content" class="mt-10 p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Welcome to Our Blog</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Here you will find various articles and content for your reading pleasure. Enjoy your stay!</p>
</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.
Aller au lien de contenu
Composant de lien aligné sur les principes de Material Design, avec une conception réactive, la prise en charge du mode sombre et une palette de couleurs monochromatique simple pour les applications de médias sociaux.
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.