콘텐츠 링크로 건너뛰기

접근성을 위한 "Skip to Content" 링크 구성 요소로, 회색조 색 구성표가 있는 다크 모드 대시보드용으로 설계되었습니다. 반응형 및 다크 모드 스타일로 인해 적당히 복잡합니다. JavaScript는 사용되지 않습니다. 어두운 테마 지원을 위해 dark: 접두사가 있는 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-gray-800 focus:text-white focus:p-3 focus:underline dark:focus:bg-gray-900 dark:focus:text-gray-200">Skip to Content</a>

관련 구성 요소

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

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

열다

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

Glassmorphism JavaScript 없이 Tailwind CSS를 사용하여 젖빛 유리 효과, 흐림, 응답성 및 다크 모드 지원을 특징으로 하는 콘텐츠 링크로 건너뜁니다.

열다

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

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

열다