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>

관련 구성 요소

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

Skip to Content Link 컴포넌트는 물리적 버튼과 유사한 스큐어모픽 요소로 디자인되었습니다. 구성 요소에는 파스텔 색 구성표, 호버 효과를 포함한 중간 정도의 복잡성 및 어두운 테마 지원이 있습니다.

열다

브루탈리스트: 콘텐츠 링크로 건너뛰기(포레스트/그린)

원시적이고 대담한 '콘텐츠로 건너뛰기' 링크 구성 요소는 예약/예약 시스템에 적합한 숲/녹색 색상 팔레트를 사용하여 브루탈리즘 스타일로 디자인되었습니다. 반응이 빠르고 다크 모드를 지원합니다.

열다

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

Tailwind CSS를 사용하여 반응형 효과 및 어두운 테마 지원과 함께 3D 스타일의 '콘텐츠로 건너뛰기' 링크를 제공하는 웹 구성 요소입니다.

열다