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

열다

소셜 미디어 바닥글 구성 요소

소셜 네트워킹 인터페이스를 위한 반응형 바닥글 구성 요소로, 단색 파란색 색 구성표를 사용하는 Material Design 원칙에 따라 설계되었습니다. 그리드 기반 레이아웃, 깊이 효과(그림자), 대화형 요소에 대한 호버 및 전환 애니메이션, 뉴스레터 구독 양식, 소셜 아이콘, 사용자 아바타 및 Tailwind의 dark: 수정자를 통한 다크 모드 지원을 제공합니다.

열다

Neumorphic Footer 컴포넌트

소셜 미디어를 위한 뉴모픽 스타일의 바닥글 컴포넌트는 생생한 색상과 복잡한 레이아웃으로 인터페이스하여 다크 모드를 지원합니다.

열다