Components Footer Glassmorphism Monochromatic Footer

Glassmorphism Monochromatic Footer

A simple, monochromatic glassmorphism footer component for a blog, with responsive design and dark mode support.

Preview

HTML Code


<footer class="backdrop-blur-md bg-white/30 dark:bg-gray-800/30 text-gray-800 dark:text-gray-200 p-6">
  <div class="container mx-auto flex flex-col items-center justify-between md:flex-row">
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <p>&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
    <div class="flex space-x-4">
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Contact</a>
    </div>
  </div>
</footer>

Related Components

Footer Component Footer

A simple footer component with a subtle Skeuomorphism design, using an analogous color scheme. It includes a copyright notice, a few navigation links, and social media icons. The design is responsive and supports dark mode.

Open

Footer Component

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

Open

Footer Component

A Neumorphic Footer Component for a Blog/Content Website, Monochromatic color scheme, with dark mode support. It is a moderately complex component. It is responsive.

Open