Aller au composant de lien de contenu
Un composant de lien simple, monochrome et inspiré de la nature pour les outils CRM/Business, garantissant l’accessibilité et la réactivité avec la prise en charge du mode sombre.
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>Composants associés
Aller au composant de lien de contenu
Glassmorphism Aller au contenu Lien présentant un effet de verre givré, le flou, la réactivité et la prise en charge du mode sombre à l’aide de Tailwind CSS, sans JavaScript.
Aller au lien de contenu
Un composant de lien réactif « Skip to Content » stylisé avec Glassmorphism, mettant en œuvre un schéma de couleurs complémentaire, une complexité modérée et une prise en charge du mode sombre adapté aux sites Web d’entreprise. Ce composant est implémenté uniquement en HTML avec les classes CSS Tailwind, ne nécessitant aucun JavaScript.
Skeuomorphic_Autumn_Skip_to_Content_Link
Un composant de lien simple et skeuomorphe « Passer au contenu » conçu avec une palette de couleurs d’automne, adapté aux plateformes éducatives, offrant accessibilité et réactivité avec la prise en charge du mode sombre.