跳至内容链接组件
一个视觉上吸引人的 3D 风格 Skip to Content 链接，可帮助用户绕过社交媒体界面上的导航菜单。该组件使用互补配色方案（蓝色和橙色），并通过阴影和变换实现 3D 效果。具有响应式设计和深色主题支持。该链接在聚焦或激活时固定在视区的左上角，使其易于键盘导航，同时在不使用时保持不显眼。
HTML 代码
<!-- 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>