CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 링크로 건너뛰기 Content Link Component - Skeuomorphism Grayscale로 건너뛰기

Content Link Component - Skeuomorphism Grayscale로 건너뛰기

블로그 콘텐츠를 위한 회색조의 스큐어모픽 디자인이 있는 간단하고 반응이 빠른 "콘텐츠로 건너뛰기" 링크. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>

<main id="main-content" class="p-4">
  <!-- Your main content goes here -->
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
  <p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>

관련 구성 요소

콘텐츠 링크로 건너뛰기 - 레트로 단색

Retro/Vintage design, Monochromatic color scheme, and Simple complexity가 있는 Content Link 컴포넌트로 건너뜁니다.

열다

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

Skip to Content Link 구성 요소는 3D 요소, 흙색으로 설계되었으며 대시보드 인터페이스에 맞게 조정되었습니다. 여기에는 밝은 테마와 어두운 테마에 대한 스타일이 모두 포함됩니다.

열다

콘텐츠 링크로 건너뛰기

비즈니스 웹 사이트를 위한 3D 회색조 디자인의 Skip to Content Link 구성 요소. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 자바스크립트가 없습니다.

열다