Aller au composant de lien de contenu
Un composant de lien neumorphique « Skip to Content » pour l’accessibilité dans les applications technologiques/SaaS, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a148c,
-6px -6px 12px #9c27b0;
}
</style>Composants associés
Aller au composant de lien de contenu
Un composant Web qui fournit un lien pour passer au contenu principal, stylisé en Material Design avec une palette de couleurs pastel, adapté aux sites Web de commerce électronique. Il présente un design réactif avec prise en charge du thème sombre.
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 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.