Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기

<!-- 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>