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é.
HTML Code
<!-- Skip to Content Component with 3D Design -->
<div class="relative z-50">
<!-- Skip link - hidden by default but visible on focus -->
<a href="#main-content"
class="fixed top-4 left-4 transform -translate-y-20 focus:translate-y-0 transition-transform duration-200 ease-in-out
p-3 rounded-lg
text-white font-bold
bg-blue-600 hover:bg-blue-700
dark:bg-orange-500 dark:hover:bg-orange-600
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-blue-400
shadow-[0.5rem_0.5rem_0px_0px_rgba(237,137,54,0.8)] dark:shadow-[0.5rem_0.5rem_0px_0px_rgba(37,99,235,0.8)]
transform-gpu hover:translate-y-1 hover:translate-x-1 hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(237,137,54,0.8)] dark:hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(37,99,235,0.8)]
text-sm md:text-base">
Skip to Content
</a>
</div>
<!-- Simulated content for demonstration purposes -->
<header class="w-full bg-gray-100 dark:bg-gray-800 p-4">
<nav class="flex justify-between items-center">
<div class="text-blue-600 dark:text-orange-500 font-bold text-xl">SocialApp</div>
<div class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Profile</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Messages</a>
</div>
</nav>
</header>
<!-- Main content that will be skipped to -->
<main id="main-content" class="container mx-auto p-4 mt-4">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Your Feed</h1>
<!-- Sample social media post -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">Just discovered this amazing 3D design technique! #design #creativity</p>
<img src="https://picsum.photos/seed/picsum1/600/400" alt="Post image" class="w-full h-64 object-cover rounded-lg mb-3">
<div class="flex space-x-4">
<button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
Like
</button>
<button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
Comment
</button>
<button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share
</button>
</div>
</div>
<!-- More content to make skipping meaningful -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Suggested Friends</h2>
<div class="space-y-3">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
</div>
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Williams</p>
</div>
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Trending Topics</h2>
<div class="space-y-2">
<div class="text-blue-600 dark:text-orange-500 hover:underline">#3DDesign</div>
<div class="text-blue-600 dark:text-orange-500 hover:underline">#TailwindCSS</div>
<div class="text-blue-600 dark:text-orange-500 hover:underline">#WebAccessibility</div>
<div class="text-blue-600 dark:text-orange-500 hover:underline">#ResponsiveDesign</div>
</div>
</div>
</div>
</main>Composants associés
Aller au lien de contenu
Un composant de lien Aller au contenu dans le style de conception 3D, avec une palette de couleurs de terre, conçu pour le commerce électronique avec une complexité modérée. Il comprend un design réactif et une prise en charge du thème sombre.
Aller au lien de contenu
Un composant Skip to Content Link avec une conception 3D en niveaux de gris pour les sites Web d’entreprise. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.
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.