Skip to Content Link Component
A visually engaging 3D-style Skip to Content link that helps users bypass navigation menus on a social media interface. The component uses a complementary color scheme (blue and orange) with a 3D effect achieved through shadows and transforms. Features responsive design and dark theme support. The link appears fixed at the top left of the viewport when focused or active, making it easily accessible for keyboard navigation while remaining unobtrusive when not in use.
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>Related Components
Skip to Content Link Component
A responsive Skip to Content link component for a dashboard with a Neumorphism style and an Earth tones color scheme.
Skip to Content Link
A Skip to Content Link Component styled with Material Design principles, a monochromatic color scheme, and supporting dark mode. It is suitable for e-commerce websites and is built using Tailwind CSS without JavaScript.
Skip to Content Link
A Skip to Content Link Component with Neumorphism design style, a triadic color scheme, and a complex layout for blog and content websites. It includes responsive design and dark mode support using Tailwind CSS.