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

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

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

미리 보기

HTML 코드 

<div class="flex flex-col gap-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <a href="#content" class="flex items-center justify-center h-12 px-4 font-medium text-white bg-brown-700 rounded-full shadow-md dark:bg-green-600 hover:bg-brown-600 dark:hover:bg-green-500 transition duration-300">
        Skip to Content
    </a>
    <p class="text-gray-800 dark:text-gray-300">
        Use this link to quickly navigate to the main content of the dashboard.
    </p>
    <img src="https://picsum.photos/200/100" alt="Dashboard Image" class="rounded-lg shadow-md" />
    <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" />
        <span class="text-gray-800 dark:text-gray-300">User: John Doe</span>
    </div>
</div>

관련 구성 요소

Content Link Component - Skeuomorphism Grayscale로 건너뛰기

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

열다

콘텐츠 링크로 건너뛰기

Skip to Content Link 구성 요소는 Material Design 원칙, 단색 색 구성표 및 어두운 모드 지원으로 스타일이 지정되었습니다. 전자 상거래 웹 사이트에 적합하며 JavaScript 없이 Tailwind CSS를 사용하여 구축되었습니다.

열다

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

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

열다