HTML 코드
<footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center"> <div class="flex flex-wrap justify-center"> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">Contact Us</h4> <p class="text-lg">Email: [email protected]</p> <p class="text-lg">Phone: (123) 456-7890</p> </div> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">Follow Us</h4> <div class="flex space-x-4"> <a href="#" class="text-lg hover:text-gray-400">Facebook</a> <a href="#" class="text-lg hover:text-gray-400">Twitter</a> <a href="#" class="text-lg hover:text-gray-400">Instagram</a> </div> </div> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">About Us</h4> <p class="text-lg">We are a company that values...</p> </div> </div> <div class="flex flex-wrap justify-center mt-10"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3"> </div> <div class="mt-10 text-center"> <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p> </div> <style> @media (prefers-color-scheme: dark) { .bg-gray-800 { background-color: #1a1a1a; } .text-white { color: #f0f0f0; } .hover\:text-gray-400:hover { color: #a0a0a0; } } </style> </footer>
관련 구성 요소
바닥글 구성 요소 - Swiss Pastel Consulting
스위스 디자인의 영향을 받은 깔끔하고 미니멀하며 반응이 빠른 바닥글 구성 요소로, 파스텔 색상과 선명한 타이포그래피를 특징으로 하며 컨설팅/서비스 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
바닥글 구성 요소
기업/전문 예약 및 예약 시스템에 적합한 간단하고 깨끗하며 신뢰할 수 있는 바닥글 구성 요소로, 미묘한 무지개 그라데이션 테두리와 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.