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.
Brutaliste Aller au lien vers le contenu (forêt/vert)
Un composant de lien brut et audacieux « Skip to Content » conçu dans un style brutaliste avec une palette de couleurs forêt/vert, adapté aux systèmes de réservation. Il est réactif et prend en charge le mode sombre.
Aller au lien de contenu
Un composant Skip to Content Link avec une conception 3D en niveaux de gris pour les sites Web d’entreprise. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.