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

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

시각적으로 매력적인 '콘텐츠로 건너뛰기' 링크 구성 요소는 마이크로 인터랙션에 중점을 둔 대시보드용으로 설계되었으며, Tailwind CSS를 통한 보색 구성표 및 다크 모드 지원을 활용합니다.

미리 보기

HTML 코드 

<div class="relative">
    <a href="#content" class="skip-to-content block p-4 text-white bg-blue-500 transition-opacity duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-pink-400">
        Skip to Content
    </a>
    <div class="absolute top-0 left-0 p-2 mt-2 rounded-md bg-gray-800 dark:bg-gray-900">
        <p class="text-sm text-gray-300 dark:text-gray-200">Press <span class="font-semibold">Tab</span> to focus on the link and skip to the main content.</p>
    </div>
</div>
<div id="content" class="mt-10 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard Content</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 1</p>
        </div>
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 2</p>
        </div>
    </div>
</div>

관련 구성 요소

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

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

열다

콘텐츠 링크로 건너뛰기

Neumorphism 디자인 스타일, 트라이어딕 색 구성표, 블로그 및 콘텐츠 웹 사이트를 위한 복잡한 레이아웃이 있는 Skip to Content Link Component. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

Content Link Component - Skeuomorphism Grayscale로 건너뛰기

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

열다