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
Aller au composant de lien de contenu
Un lien Skip to Content de style 3D visuellement attrayant qui aide les utilisateurs à contourner les menus de navigation sur une interface de réseau social. Le composant utilise une palette de couleurs complémentaires (bleu et orange) avec un effet 3D obtenu par des ombres et des transformations. Dispose d’un design réactif et d’un support de thème sombre. Le lien apparaît fixe en haut à gauche de la fenêtre d’affichage lorsqu’il est activé ou actif, ce qui le rend facilement accessible pour la navigation au clavier tout en restant discret lorsqu’il n’est pas utilisé.
Aller au lien de contenu
Un composant de lien « Aller au contenu » pour l’accessibilité, conçu pour les tableaux de bord en mode sombre avec une palette de couleurs en niveaux de gris. Il est modérément complexe en raison du style réactif et du mode sombre. Aucun JavaScript n’est utilisé. Utilise Tailwind CSS avec les préfixes dark : pour la prise en charge du thème sombre.
Aller au lien de contenu
Composant de lien Aller au contenu conçu selon les principes de Material Design, une palette de couleurs monochromatique et prenant en charge le mode sombre. Il convient aux sites Web de commerce électronique et est construit à l’aide de Tailwind CSS sans JavaScript.