Skip to Content Link Component
A Skip to Content Link component designed with skeuomorphic elements resembling a physical button. The component will have a pastel color scheme, a moderate complexity including hover effects, and support for dark theme.
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>Related Components
Skip to Content Link - Retro Monochromatic
Skip to Content Link Component with Retro/Vintage design, Monochromatic color scheme, and Simple complexity.
Skip to Content Link Component
A visually engaging 'Skip to Content' link component designed for dashboards with a focus on microinteractions, utilizing a complementary color scheme and dark mode support through Tailwind CSS.
Skip to Content Link
A responsive Skip to Content Link component designed in a skeuomorphic style with a pastel color scheme. This component is meant for blog and content consumption, and includes support for dark mode.