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

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

기술/SaaS 애플리케이션의 접근성을 위한 뉴모픽 'Skip to Content' 링크 구성 요소로, 자주색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

미리 보기

HTML 코드 

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a148c,
                -6px -6px 12px #9c27b0;
  }
</style>

관련 구성 요소

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

CRM/비즈니스 도구를 위한 단순하고 단색의 자연에서 영감을 받은 '콘텐츠로 건너뛰기' 링크 구성 요소로, 다크 모드 지원으로 접근성과 응답성을 보장합니다.

열다

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

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

열다

콘텐츠 링크로 건너뛰기

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

열다