CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 Neumorphic Footer 컴포넌트

Neumorphic Footer 컴포넌트

소셜 미디어를 위한 뉴모픽 스타일의 바닥글 컴포넌트는 생생한 색상과 복잡한 레이아웃으로 인터페이스하여 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<footer class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-2xl">
    <div class="flex flex-col items-center">
        <div class="flex space-x-6 mb-4">
            <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=1" alt="Facebook" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=2" alt="Twitter" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=3" alt="Instagram" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-purple-500 dark:bg-purple-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=4" alt="LinkedIn" class="h-8 w-8 rounded-full">
            </a>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-2">© 2023 Your Company</p>
        <p class="text-gray-500 dark:text-gray-400 text-xs">Follow us on social media!</p>
    </div>
</footer>

관련 구성 요소

Footer Component Footer

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

열다

바닥글 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Brutalism 스타일의 바닥글 구성 요소입니다.

열다

Neumorphic Vibrant 바닥글

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

열다