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>관련 구성 요소
Corporate_Industrial_Footer_Ocean_Blue
반응형, 기업 및 산업 테마의 바닥글 구성 요소로, 제조 회사를 위해 설계된 바다/파란색 색 구성표가 있습니다. 탐색 링크, 연락처 정보, 소셜 미디어 및 저작권이 포함되며 완전한 다크 모드를 지원합니다.
바닥글 구성 요소
기업/전문 예약 및 예약 시스템에 적합한 간단하고 깨끗하며 신뢰할 수 있는 바닥글 구성 요소로, 미묘한 무지개 그라데이션 테두리와 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.