Search Components

Footer

Bottom section of the website with contact info, copyright, etc.

3D Analogous Simple Blog Footer

Responsive Footer Component with Dark Theme Support using Tailwind CSS. The footer has a simple 3D design with analogous colors. It is optimized for blog/content websites.

Open Preview

                <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>

Minimalist Social Media Footer

A minimalist footer component with earth tones color scheme for social media interfaces. Responsive with dark theme support.

Open Preview

                <footer class="bg-gray-200 dark:bg-gray-800 py-6">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <p class="text-gray-700 dark:text-gray-300 text-sm">&copy; 2023 SocialMedia. All rights reserved.</p>
      </div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </div>
    </div>
  </div>
</footer>

Footer Component

Responsive Footer Component with Skeuomorphism style, Earth tones color scheme, and dark theme support, designed for Social Media."

Open Preview

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">

<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
  <div class="container mx-auto px-4 flex flex-col items-center">

    <!-- Social Media Links (Skeuomorphism style) -->
    <div class="flex space-x-6 mb-6">
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Facebook
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Twitter
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Instagram
      </a>
    </div>

    <!-- Copyright Information -->
    <p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright &copy; 2023 Your Company. All rights reserved.</p>

  </div>
</footer>

</body>
</html>

Footer Component

A simple dark mode footer component for social media with complementary color scheme.

Open Preview

                <footer class="bg-gray-800 text-white py-4">
    <div class="container mx-auto flex flex-col items-center">
        <div class="flex space-x-4 mb-3">
            <a href="#" class="text-gray-400 hover:text-gray-200">About</a>
            <a href="#" class="text-gray-400 hover:text-gray-200">Contact</a>
            <a href="#" class="text-gray-400 hover:text-gray-200">Privacy Policy</a>
        </div>
        <div class="flex space-x-4 mb-3">
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Facebook" class="inline-block">
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Twitter" class="inline-block">
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Instagram" class="inline-block">
            </a>
        </div>
        <div class="text-center">
            <p class="text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

Footer Component

A simple, responsive footer component with 3D design elements and earth tones, designed for a blog or content site with dark theme support.

Open Preview

                <footer class="bg-gray-300 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-auto text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-700 dark:text-gray-300 text-sm">&copy; 2023 Your Blog Name. All rights reserved.</p>
      </div>
      <div class="w-full md:w-auto text-center md:text-right">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white mx-2 text-sm">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white mx-2 text-sm">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

Footer Component

A Footer component designed in a skeuomorphic style with a triadic color scheme and moderate complexity, suitable for a Blog/Content layout.

Open Preview

                <footer class="bg-gray-800 text-gray-100 p-6 dark:bg-gray-900">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">About Us</h2>
            <p class="text-sm">We are passionate about sharing knowledge through engaging content. Explore our blog to learn more.</p>
        </div>
        <div class="flex mb-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Random Image" class="rounded-full mr-2">
            <div class="flex flex-col">
                <span class="font-semibold">Author Name</span>
                <span class="text-xs text-gray-400">Author Bio Preview</span>
            </div>
        </div>
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">Follow Us</h2>
            <div class="flex space-x-4">
                <a href="#" class="p-2 rounded-full bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
                    <img src="https://picsum.photos/20/20?random=2" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-pink-500 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
                    <img src="https://picsum.photos/20/20?random=3" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
                    <img src="https://picsum.photos/20/20?random=4" alt="Social Icon" class="w-full h-full">
                </a>
            </div>
        </div>
    </div>
    <div class="text-center mt-6 border-t border-gray-700 pt-4">
        <p class="text-xs">&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
</footer>

Neumorphism Earth Footer

Responsive Footer Component with Neumorphism, Earth tones, and Dark theme support

Open Preview

                ```html
<footer class="bg-stone-100 dark:bg-stone-900 shadow-neumorphism-light dark:shadow-neumorphism-dark mt-12">
  <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
    <div class="text-center text-stone-700 dark:text-stone-300">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #bdae9d, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #1e1e1e, -5px -5px 10px #2e2e2e;
}
</style>
```

Glassmorphism Footer Component

A responsive footer component with a glassmorphism style featuring frosted glass-like translucent elements with blur effects, and supports a dark theme.

Open Preview

                <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>

Footer Component

A Footer component designed in a Neumorphism style, supporting responsive effects and dark themes using Tailwind CSS.

Open Preview

                <footer class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h5>
                <p class="text-gray-600 dark:text-gray-400">We are dedicated to providing the best service to our customers.</p>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us</h5>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Facebook</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Twitter</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Instagram</a>
                </div>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Us</h5>
                <p class="text-gray-600 dark:text-gray-400">Email: [email protected]</p>
            </div>
            <div class="hidden md:block">
                <img src="https://picsum.photos/50" alt="Placeholder" class="rounded-full w-10 h-10" />
            </div>
        </div>
        <div class="text-center mt-6">
            <p class="text-gray-600 dark:text-gray-400">© 2023 Company. All Rights Reserved.</p>
        </div>
    </div>
</footer>

3D Footer Fade-in

Responsive Footer with 3D Design elements and Dark Mode support

Open Preview

                <footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-10">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h3 class="text-xl font-bold mb-3">3D Footer</h3>
        <p class="text-sm">Explore the depths of our amazing footer. Designed with a touch of 3D for an immersive experience.</p>
      </div>
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3">
        <h4 class="text-lg font-semibold mb-3">Contact Us</h4>
        <p class="text-sm">Email: [email protected]</p>
        <p class="text-sm">Phone: +1 234 567 890</p>
        <div class="flex mt-4 space-x-4">
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-instagram"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 3D Footer. All rights reserved.</p>
    </div>
  </div>
</footer>

Search Components

Categories

Footer