CCHub Logo CCHub Tailwind Collection
구성 요소 이동 경로 탐색 Breadcrumb Navigation 구성 요소

Breadcrumb Navigation 구성 요소

Material Design 및 Tailwind CSS로 스타일링된 반응형 이동 경로 탐색 구성 요소로, 어두운 테마 지원과 트라이어딕 색 구성표가 특징입니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 shadow-md rounded p-4 mb-6">
    <ol class="list-reset flex text-gray-600 dark:text-gray-300 text-sm font-semibold">
        <li>
            <a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Home</a>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Blog</a>
            <span class="mx-2">/</span>
        </li>
        <li class="text-gray-500 dark:text-gray-400">Post Title</li>
    </ol>
</nav>

<section class="bg-white dark:bg-gray-800 p-5 rounded shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
        Post Title
    </h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
            Written by <span class="font-semibold">Author Name</span> on <span class="font-semibold">June 1, 2023</span>
        </p>
    </div>
    <img src="https://picsum.photos/800/400" alt="Blog Post Image" class="w-full rounded mb-4 shadow">
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Welcome to the blog post content. This is where you can include your text... 
    </p>
</section>

관련 구성 요소

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 구축된 파스텔 색 구성표 및 어두운 테마 지원과 함께 Neumorphism 디자인 스타일을 활용하는 반응형 이동 경로 탐색 구성 요소입니다.

열다

Breadcrumb Navigation 구성 요소

블로그/콘텐츠 목적을 위한 레트로/빈티지 디자인, 생생한 색 구성표 및 단순 복잡성 수준을 갖춘 이동 경로 탐색 구성 요소.

열다

Breadcrumb Navigation 구성 요소

glassmorphism 디자인 스타일과 함께 Tailwind CSS를 사용하는 반응형 이동 경로 탐색 구성 요소입니다. 흐릿한 유리 같은 배경이 특징이며, 어두운 테마를 지원하고, 자리 표시자 이미지를 포함합니다.

열다