Skip to Content Link Component
A simple, responsive 'Skip to Content' link component with a watercolor/artistic style, a triadic color scheme, and agriculture/farming thematic elements, supporting dark mode.
HTML Code
<div class="bg-green-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans relative">
<!-- Skip to Content Link -->
<a href="#main-content" class="
absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 mt-2
bg-yellow-600 text-white rounded-md shadow-lg
focus:translate-y-0 focus:z-50
transition-transform duration-300 ease-out
text-sm sm:text-base
dark:bg-yellow-700 dark:text-gray-100
border-2 border-transparent focus:border-green-800 dark:focus:border-green-300
font-bold tracking-wide
">Skip to Main Content</a>
<!-- Main content area (example) -->
<main id="main-content" class="
bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10
max-w-4xl w-full text-center
border-t-8 border-yellow-500 dark:border-yellow-600
relative overflow-hidden
">
<!-- Artistic element: Subtle green watercolor splash -->
<div class="
absolute top-0 left-0 w-full h-full
bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-100/50 to-transparent
dark:from-green-900/30 dark:to-transparent
pointer-events-none
opacity-70 dark:opacity-50
"></div>
<h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
Harvesting Growth, Nurturing Nature
</h1>
<p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 sm:mb-8 max-w-2xl mx-auto leading-relaxed">
Welcome to our agricultural hub. We cultivate innovation and sustainable practices,
bringing forth the bounty of the earth.
</p>
<img src="https://picsum.photos/seed/agriculture/800/450" alt="Agricultural field at sunset" class="rounded-lg shadow-md mb-6 sm:mb-8 w-full h-auto object-cover">
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed">
Our commitment extends from seed to harvest, ensuring quality and fostering a thriving ecosystem.
Explore our offerings below.
</p>
<div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<button class="
bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg
shadow-md transition duration-300 ease-in-out
dark:bg-blue-700 dark:hover:bg-blue-800
border-2 border-transparent hover:border-blue-800 dark:hover:border-blue-300
relative overflow-hidden
">
<span class="relative z-10">Learn More</span>
<span class="
absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
hover:opacity-100 transition-opacity duration-300 ease-in-out
"></span>
</button>
<button class="
bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-6 rounded-lg
shadow-md transition duration-300 ease-in-out
dark:bg-green-800 dark:hover:bg-green-900
border-2 border-transparent hover:border-green-900 dark:hover:border-green-400
relative overflow-hidden
">
<span class="relative z-10">Our Products</span>
<span class="
absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
hover:opacity-100 transition-opacity duration-300 ease-in-out
"></span>
</button>
</div>
</main>
</div>Related Components
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 Component
A web component that provides a 3D styled 'Skip to Content' link with responsive effects and dark theme support, using Tailwind CSS.
Skip to Content Link - Retro Monochromatic
Skip to Content Link Component with Retro/Vintage design, Monochromatic color scheme, and Simple complexity.