CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 탐색 바닥글 탐색 구성 요소 38

바닥글 탐색 구성 요소 38

실제 요소를 모방하기 위해 스큐어모픽 스타일로 설계된 반응형 바닥글 탐색 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다. 이 구성 요소에는 링크, 자리 표시자 이미지 및 아바타가 포함됩니다.

미리 보기

HTML 코드 

<footer class="bg-gray-800 text-white p-6 mt-8">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col items-center md:items-start">
            <h2 class="text-lg font-bold mb-2">Stay Connected</h2>
            <p class="text-sm">Follow us on our social channels!</p>
            <div class="flex space-x-4 mt-2">
                <a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
                <a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
                <a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
            </div>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">About Us</h2>
            <ul class="text-sm space-y-1">
                <li><a href="#" class="hover:underline">Our Story</a></li>
                <li><a href="#" class="hover:underline">Career</a></li>
                <li><a href="#" class="hover:underline">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">User Profiles</h2>
            <div class="flex space-x-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            </div>
        </div>
    </div>
    <div class="mt-6 text-center text-sm">
        <p>&copy; 2023 Your Company. All Rights Reserved.</p>
        <p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
    </div>
</footer>
<style>
    @media (prefers-color-scheme: dark) {
        footer {
            background-color: #1f1f1f;
        }
        footer a {
            color: #white;
        }
        footer a:hover {
            color: #cbd5e1;
        }
    }
</style>

관련 구성 요소

Glassmorphism 바닥글 탐색

Glassmorphism 스타일, 생생한 색 구성표 및 대시보드 목적을 위한 복잡한 레이아웃이 있는 바닥글 탐색 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인.

열다

Footer Navigation 구성 요소

Material Design을 사용한 전자 상거래를 위한 바닥글 탐색 구성 요소 - 반응형 및 다크 모드를 지원하는 간단한 구성 요소로, 보색 구성표를 특징으로 합니다.

열다

Footer Navigation 구성 요소

Neumorphism 디자인, 단색 색 구성표, 복잡한 복잡성 및 소셜 미디어 목적을 가진 바닥글 탐색 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다