Aller au composant de lien de contenu
Composant Skip to Content Link conçu avec des éléments skeuomorphes ressemblant à un bouton physique. Le composant aura un schéma de couleurs pastel, une complexité modérée y compris des effets de survol et la prise en charge du thème sombre.
HTML Code
<div class="flex justify-center">
<a href="#content" class="relative flex items-center justify-center w-52 h-12 rounded-lg shadow-lg bg-pastel-bg-light dark:bg-pastel-bg-dark text-pastel-text-light dark:text-pastel-text-dark hover:bg-gradient-to-r hover:from-pastel-hover-start hover:to-pastel-hover-end transition duration-200 ease-in-out">
<span class="absolute inset-0 rounded-lg border border-pastel-border-light dark:border-pastel-border-dark transform scale-110 hover:scale-100 transition duration-200 ease-in-out"></span>
<span class="font-semibold z-10">Skip to Content</span>
</a>
</div>
<style>
.bg-pastel-bg-light {
background-color: #f9e3e3;
}
.bg-pastel-bg-dark {
background-color: #3c3c3c;
}
.text-pastel-text-light {
color: #2d2d2d;
}
.text-pastel-text-dark {
color: #f6f6f6;
}
.hover\:bg-gradient-to-r:hover {
background: linear-gradient(90deg, #f9b0b0, #f6dbbd);
}
.hover\:from-pastel-hover-start:hover {
background-color: #f9b0b0;
}
.hover\:to-pastel-hover-end:hover {
background-color: #f6dbbd;
}
.border-pastel-border-light {
border-color: #f17979;
}
.border-pastel-border-dark {
border-color: #606060;
}
</style>
<div id="content" class="p-5 mt-10">
<h1 class="text-2xl font-bold dark:text-white">Welcome to My Portfolio</h1>
<img src="https://picsum.photos/800/400" alt="Portfolio Image" class="mt-5 rounded-lg shadow-lg">
<p class="mt-3 dark:text-gray-300">Here you'll find a selection of my work and projects showcasing my skills and expertise.</p>
</div>Composants associés
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.
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.
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é.