Aller au composant de lien de contenu
Un composant de lien simple et réactif « Passer au contenu » avec un style aquarelle/artistique, une palette de couleurs triadique et des éléments thématiques agriculture/agriculture, prenant en charge le mode sombre.
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>Composants associés
Glassmorphism Aller au lien vers le contenu
Glassmorphism Aller au contenu Lier le composant avec Earth Tones pour le tableau de bord.
Aller au composant de lien de contenu - Skeuomorphisme en niveaux de gris
Un lien simple et réactif « Skip to Content » avec un design skeuomorphique en niveaux de gris pour le contenu du blog. Inclut la prise en charge du mode sombre.
Aller au composant de lien de contenu
Un composant de lien neumorphique « Skip to Content » pour l’accessibilité dans les applications technologiques/SaaS, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.