Skip to Content Link Component
A simple, monochromatic, nature-inspired 'Skip to Content' link component for CRM/Business Tools, ensuring accessibility and responsiveness with dark mode support.
HTML Code
<div class="relative min-h-[100px] flex items-center justify-center bg-emerald-50 dark:bg-emerald-950 p-4 overflow-hidden rounded-lg shadow-inner sm:p-6 lg:p-8">
<!-- Background elements mimicking organic flow -->
<div class="absolute inset-0 pointer-events-none">
<div class="absolute -top-10 -left-10 w-48 h-48 bg-emerald-200 dark:bg-emerald-700 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-emerald-300 dark:bg-emerald-600 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-emerald-100 dark:bg-emerald-800 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
</div>
<a href="#main-content" class="
sr-only focus:not-sr-only
absolute top-4 left-4 z-50
px-6 py-3
bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-600
dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:bg-emerald-700
text-white dark:text-emerald-50
text-lg font-semibold
rounded-full
shadow-lg hover:shadow-xl focus:shadow-xl
transition-all duration-300 ease-in-out
transform hover:scale-105 focus:scale-105
border-2 border-emerald-400 dark:border-emerald-500
outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800 focus:ring-opacity-75
">
Skip to Main Content
</a>
<!-- Main content area to skip to -->
<div id="main-content" tabindex="-1" class="relative z-10 p-8 m-auto bg-emerald-100 dark:bg-emerald-900 rounded-lg shadow-xl text-center max-w-sm sm:max-w-md lg:max-w-lg">
<h2 class="text-2xl sm:text-3xl font-bold text-emerald-800 dark:text-emerald-100 mb-4 tracking-tight">Welcome to Our CRM</h2>
<p class="text-emerald-700 dark:text-emerald-200 text-sm sm:text-base leading-relaxed">
This is the main content area. Using the 'Skip to Main Content' link allows users to bypass repetitive navigation elements and jump directly here.
</p>
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder image for main content" class="w-full h-auto rounded-lg mt-6 shadow-md border border-emerald-200 dark:border-emerald-800">
</div>
<!-- Custom animation keyframes for organic blob effect -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>
</div>Related Components
Skip to Content Link
A Skip to Content Link Component in the 3D design style, with an earth tone color scheme, designed for e-commerce with a moderate complexity. It includes responsive design and dark theme support.
Skip to Content Link Component
A visually engaging 3D-style Skip to Content link that helps users bypass navigation menus on a social media interface. The component uses a complementary color scheme (blue and orange) with a 3D effect achieved through shadows and transforms. Features responsive design and dark theme support. The link appears fixed at the top left of the viewport when focused or active, making it easily accessible for keyboard navigation while remaining unobtrusive when not in use.
Skip to Content Link - Retro Monochromatic
Skip to Content Link Component with Retro/Vintage design, Monochromatic color scheme, and Simple complexity.