바닥글 구성 요소
뉴모피즘(Neumorphism) 스타일로 디자인된 바닥글 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.
HTML 코드
<footer class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h5>
<p class="text-gray-600 dark:text-gray-400">We are dedicated to providing the best service to our customers.</p>
</div>
<div class="mb-4 md:mb-0">
<h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us</h5>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Facebook</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Twitter</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Instagram</a>
</div>
</div>
<div class="mb-4 md:mb-0">
<h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Us</h5>
<p class="text-gray-600 dark:text-gray-400">Email: [email protected]</p>
</div>
<div class="hidden md:block">
<img src="https://picsum.photos/50" alt="Placeholder" class="rounded-full w-10 h-10" />
</div>
</div>
<div class="text-center mt-6">
<p class="text-gray-600 dark:text-gray-400">© 2023 Company. All Rights Reserved.</p>
</div>
</div>
</footer>관련 구성 요소
바닥글 구성 요소
블로그/콘텐츠 웹 사이트를 위한 Neumorphic 바닥글 구성 요소, 단색 색 구성표, 다크 모드 지원. 적당히 복잡한 구성 요소입니다. 반응이 좋습니다.
Glassmorphism 바닥글
glassmorphism 스타일로 디자인된 반응형 바닥글 구성 요소로, 젖빛 유리와 같은 효과를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.