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.
HTML Code
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:px-6 focus:py-3 focus:text-lg focus:shadow-lg focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-offset-orange-900 focus:ring-orange-800
bg-gradient-to-br from-amber-700 to-orange-900 text-amber-50 rounded-xl
border-t-2 border-l-2 border-r-4 border-b-4 border-amber-950
shadow-[inset_0_3px_5px_rgba(255,255,255,0.2),inset_0_-3px_5px_rgba(0,0,0,0.3),0_6px_10px_rgba(0,0,0,0.4)]
hover:from-amber-600 hover:to-orange-800
active:from-amber-800 active:to-orange-950 active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.2)]
transition-all duration-200 ease-out
dark:from-amber-950 dark:to-orange-900 dark:text-amber-200
dark:border-t-2 dark:border-l-2 dark:border-r-4 dark:border-b-4 dark:border-zinc-800
dark:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.1),0_6px_10px_rgba(0,0,0,0.7)]
dark:hover:from-amber-900 dark:hover:to-orange-800
dark:active:from-amber-950 dark:active:to-orange-950 dark:active:shadow-[inset_0_3px_5px_rgba(255,255,255,0.1),inset_0_-3px_5px_rgba(0,0,0,0.3)]
">Skip to Main Content</a>
<main id="main-content" class="p-8 bg-orange-50 dark:bg-zinc-900 min-h-screen text-zinc-900 dark:text-zinc-100 flex flex-col justify-center items-center font-sans">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-orange-900 dark:text-orange-200 drop-shadow-md text-center">
Welcome to Our Learning Platform
</h1>
<p class="text-xl md:text-2xl text-orange-800 dark:text-orange-300 mb-8 max-w-3xl text-center">
Explore a world of knowledge and expand your horizons. This is placeholder content for the main section of your educational platform.
</p>
<img src="https://picsum.photos/seed/learn/800/450" alt="Autumn leaves and books" class="rounded-2xl shadow-xl border-4 border-amber-800 dark:border-amber-700 max-w-full h-auto mb-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
<img src="https://picsum.photos/seed/course1/100/100" alt="Course thumbnail 1" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
<h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Course Title One</h3>
<p class="text-center text-orange-700 dark:text-orange-300">Dive deep into the fundamentals of web development.</p>
</div>
<div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
<img src="https://picsum.photos/seed/course2/100/100" alt="Course thumbnail 2" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
<h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Interactive Design</h3>
<p class="text-center text-orange-700 dark:text-orange-300">Learn to create engaging user experiences.</p>
</div>
<div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
<img src="https://picsum.photos/seed/course3/100/100" alt="Course thumbnail 3" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
<h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Data Science Basics</h3>
<p class="text-center text-orange-700 dark:text-orange-300">Uncover insights with powerful data analysis.</p>
</div>
</div>
</main>Composants associés
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 composant de lien de contenu
Un composant de lien « passer au contenu » propre et minimaliste pour les applications de sport/fitness, conçu avec une palette de couleurs en niveaux de gris. Il est réactif et prend en charge le mode sombre, en mettant l’accent sur la typographie et l’accessibilité.
Aller au lien de contenu
Un composant réactif Skip to Content Link conçu dans un style skeuomorphe avec une palette de couleurs pastel. Ce composant est destiné à la consommation de blog et de contenu, et inclut la prise en charge du mode sombre.