구성 요소 바닥글 3D 유사 간단한 블로그 바닥글

3D 유사 간단한 블로그 바닥글

Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 바닥글 구성 요소. 바닥글은 유사한 색상의 단순한 3D 디자인을 가지고 있습니다. 블로그/콘텐츠 웹사이트에 최적화되어 있습니다.

미리 보기

HTML 코드

<footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
  <div class="container mx-auto flex flex-wrap justify-between items-center">
    <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">My Blog</h3>
      <p>&copy; 2023 My Blog. All rights reserved.</p>
    </div>
    <div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">Quick Links</h3>
      <ul>
        <li><a href="#" class="hover:underline">Home</a></li>
        <li><a href="#" class="hover:underline">Blog</a></li>
        <li><a href="#" class="hover:underline">About</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
      </ul>
    </div>
    <div class="w-full md:w-1/3 text-center md:text-right">
      <h3 class="text-xl font-bold mb-2">Follow Me</h3>
      <div class="flex justify-center md:justify-end space-x-4">
        <a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

관련 구성 요소

포트폴리오-미니멀리스트-트라이어딕-복잡-바닥글

포트폴리오 웹사이트를 위한 복잡하고 미니멀한 스타일의 바닥글로, 트라이어딕 색 구성표를 사용합니다. 탐색 링크, 소셜 미디어 아이콘, 저작권, 연락을 위한 클릭 유도문안이 포함되어 있으며 완전한 응답성과 다크 모드를 지원합니다.

열다

바닥글 구성 요소

3D 디자인 요소와 흙색이 있는 단순하고 반응이 빠른 바닥글 구성 요소로, 어두운 테마를 지원하는 블로그 또는 콘텐츠 사이트용으로 설계되었습니다.

열다

Finance 바닥글 구성 요소

금융 및 은행 인터페이스를 위한 반응형 바닥글 구성 요소로, 보색 구성표, Material Design 원칙 및 완전한 다크 모드 지원을 특징으로 합니다. 탐색 링크, 소셜 미디어 아이콘 및 저작권 고지가 포함됩니다.

열다