CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 바닥글 구성 요소

바닥글 구성 요소

트라이어딕 색 구성표와 적당한 복잡성을 가진 스큐어모픽 스타일로 디자인된 바닥글 구성 요소로, 블로그/콘텐츠 레이아웃에 적합합니다.

미리 보기

HTML 코드 

<footer class="bg-gray-800 text-gray-100 p-6 dark:bg-gray-900">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">About Us</h2>
            <p class="text-sm">We are passionate about sharing knowledge through engaging content. Explore our blog to learn more.</p>
        </div>
        <div class="flex mb-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Random Image" class="rounded-full mr-2">
            <div class="flex flex-col">
                <span class="font-semibold">Author Name</span>
                <span class="text-xs text-gray-400">Author Bio Preview</span>
            </div>
        </div>
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">Follow Us</h2>
            <div class="flex space-x-4">
                <a href="#" class="p-2 rounded-full bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
                    <img src="https://picsum.photos/20/20?random=2" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-pink-500 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
                    <img src="https://picsum.photos/20/20?random=3" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
                    <img src="https://picsum.photos/20/20?random=4" alt="Social Icon" class="w-full h-full">
                </a>
            </div>
        </div>
    </div>
    <div class="text-center mt-6 border-t border-gray-700 pt-4">
        <p class="text-xs">&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
</footer>

관련 구성 요소

Footer Component Footer

유사한 색 구성표를 사용하는 미묘한 Skeuomorphism 디자인의 간단한 바닥글 구성 요소입니다. 여기에는 저작권 표시, 몇 가지 탐색 링크 및 소셜 미디어 아이콘이 포함됩니다. 디자인은 반응형이며 다크 모드를 지원합니다.

열다

Industrial_Candy_Footer_Component

포럼/커뮤니티 플랫폼을 위한 반응형 바닥글 구성 요소로, '사탕/달콤한' 색상 액센트가 있는 '산업적' 미학을 특징으로 합니다. 탐색 링크, 소셜 미디어 아이콘, 저작권 및 뉴스레터 구독이 포함되며 완전한 다크 모드가 지원됩니다.

열다

Neumorphic Vibrant 바닥글

단순하고 반응이 빠른 바닥글 구성 요소는 뉴모픽 디자인 원칙과 생생한 색상으로 스타일링되었습니다. 미묘한 그림자가 있는 부드럽고 돌출된 외관을 특징으로 하는 동시에 고채도 악센트 색상을 유지합니다. 바닥글에는 사이트 탐색, 소셜 링크 및 전체 다크 모드를 지원하는 저작권 정보에 대한 기본 섹션이 포함되어 있습니다.

열다