Glassmorphism 바닥글 구성 요소
흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 glassmorphism 스타일의 반응형 바닥글 구성 요소이며 어두운 테마를 지원합니다.
HTML 코드
<footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-center md:text-left">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
<p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
</div>
<div class="mt-4 md:mt-0">
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
</div>
</div>
<div class="flex justify-center mt-4">
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
<span class="text-gray-500 dark:text-gray-300">|</span>
<a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
</div>
</div>
</footer>관련 구성 요소
Neumorphic Vibrant 바닥글
단순하고 반응이 빠른 바닥글 구성 요소는 뉴모픽 디자인 원칙과 생생한 색상으로 스타일링되었습니다. 미묘한 그림자가 있는 부드럽고 돌출된 외관을 특징으로 하는 동시에 고채도 악센트 색상을 유지합니다. 바닥글에는 사이트 탐색, 소셜 링크 및 전체 다크 모드를 지원하는 저작권 정보에 대한 기본 섹션이 포함되어 있습니다.
소셜 미디어 바닥글 구성 요소
소셜 네트워킹 인터페이스를 위한 반응형 바닥글 구성 요소로, 단색 파란색 색 구성표를 사용하는 Material Design 원칙에 따라 설계되었습니다. 그리드 기반 레이아웃, 깊이 효과(그림자), 대화형 요소에 대한 호버 및 전환 애니메이션, 뉴스레터 구독 양식, 소셜 아이콘, 사용자 아바타 및 Tailwind의 dark: 수정자를 통한 다크 모드 지원을 제공합니다.