Component:
Header Fintech Glassmorphism

Name: Header Fintech Glassmorphism
Availability: InStock
Free
Tags: Header Page Section Navigation Fintech Glassmorphic
Colors:
Description:
This carefully crafted Header component is perfect for Fintech landing pages, featuring a Glassmorphic design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Header
@industry: Fintech
@style: Glassmorphism
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->

<section
  class="fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-white/10"
>
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16 md:h-20">
      <!-- Logo -->
      <div class="flex items-center space-x-2">
        <div
          class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center transform hover:scale-105 transition-transform duration-300"
        >
          <div class="w-6 h-6 bg-white rounded-sm transform rotate-45"></div>
        </div>
        <span
          class="text-xl md:text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
          >FinTech</span
        >
      </div>

      <!-- Desktop Navigation -->
      <nav class="hidden lg:flex items-center space-x-8">
        <div class="relative group">
          <button
            class="dropdown-toggle flex items-center space-x-1 text-gray-300 hover:text-white transition-colors duration-200"
            data-dropdown="products"
          >
            <span>Products</span>
            <svg
              xmlns="https://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
            >
              <path d="m6 9 6 6 6-6"></path>
            </svg>
          </button>
          <div
            class="dropdown-menu hidden absolute top-full left-0 mt-2 w-64 bg-slate-800/90 backdrop-blur-md border border-white/10 rounded-xl p-4 shadow-2xl"
            data-dropdown-content="products"
          >
            <a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
              <div class="font-medium text-white group-hover:text-blue-400">
                Digital Banking
              </div>
              <div class="text-sm text-gray-400">Modern banking solutions</div>
            </a>
            <a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
              <div class="font-medium text-white group-hover:text-purple-400">
                Investment Platform
              </div>
              <div class="text-sm text-gray-400">Smart investment tools</div>
            </a>
            <a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
              <div class="font-medium text-white group-hover:text-green-400">
                Business Solutions
              </div>
              <div class="text-sm text-gray-400">
                Enterprise financial tools
              </div>
            </a>
          </div>
        </div>

        <div class="relative group">
          <button
            class="dropdown-toggle flex items-center space-x-1 text-gray-300 hover:text-white transition-colors duration-200"
            data-dropdown="solutions"
          >
            <span>Solutions</span>
            <svg
              xmlns="https://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
            >
              <path d="m6 9 6 6 6-6"></path>
            </svg>
          </button>
          <div
            class="dropdown-menu hidden absolute top-full left-0 mt-2 w-64 bg-slate-800/90 backdrop-blur-md border border-white/10 rounded-xl p-4 shadow-2xl"
            data-dropdown-content="solutions"
          >
            <a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
              <div class="font-medium text-white group-hover:text-blue-400">
                For Individuals
              </div>
              <div class="text-sm text-gray-400">
                Personal finance management
              </div>
            </a>
            <a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
              <div class="font-medium text-white group-hover:text-purple-400">
                For Businesses
              </div>
              <div class="text-sm text-gray-400">
                Corporate financial solutions
              </div>
            </a>
          </div>
        </div>

        <a
          href="#"
          class="text-gray-300 hover:text-white transition-colors duration-200"
          >Pricing</a
        >
        <a
          href="#"
          class="text-gray-300 hover:text-white transition-colors duration-200"
          >About</a
        >
        <a
          href="#"
          class="text-gray-300 hover:text-white transition-colors duration-200"
          >Contact</a
        >
      </nav>

      <!-- Desktop Actions -->
      <div class="hidden lg:flex items-center space-x-4">
        <button
          class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </svg>
        </button>
        <button
          class="relative p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5"
          >
            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
          </svg>
          <span
            class="absolute -top-1 -right-1 w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"
          ></span>
        </button>
        <button
          class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5"
          >
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </button>
        <button
          class="text-gray-300 hover:text-white hover:bg-white/10 px-4 py-2 rounded"
        >
          Sign In
        </button>
        <button
          class="px-6 py-2 rounded text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl"
        >
          Get Started
        </button>
      </div>

      <!-- Mobile Menu Button -->
      <button
        id="menuToggle"
        class="lg:hidden p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="w-6 h-6"
        >
          <line x1="4" x2="20" y1="12" y2="12"></line>
          <line x1="4" x2="20" y1="6" y2="6"></line>
          <line x1="4" x2="20" y1="18" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation -->
  <div
    id="mobileMenu"
    class="hidden lg:hidden absolute top-full left-0 right-0 bg-slate-900 backdrop-blur-md border-b border-white/10 shadow-2xl"
  >
    <div class="max-w-7xl mx-auto px-4 py-6">
      <nav class="space-y-4">
        <div>
          <button
            class="mobile-dropdown-toggle flex items-center justify-between w-full text-left p-3 rounded-lg hover:bg-white/10 text-gray-300"
            data-dropdown="mobile-products"
          >
            <span>Products</span>
            <svg
              xmlns="https://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
            >
              <path d="m6 9 6 6 6-6"></path>
            </svg>
          </button>
          <div
            class="mobile-dropdown-menu hidden ml-4 space-y-2"
            data-dropdown-content="mobile-products"
          >
            <a
              href="#"
              class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
              >Digital Banking</a
            >
            <a
              href="#"
              class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
              >Investment Platform</a
            >
            <a
              href="#"
              class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
              >Business Solutions</a
            >
          </div>
        </div>

        <div>
          <button
            class="mobile-dropdown-toggle flex items-center justify-between w-full text-left p-3 rounded-lg hover:bg-white/10 text-gray-300"
            data-dropdown="mobile-solutions"
          >
            <span>Solutions</span>
            <svg
              xmlns="https://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
            >
              <path d="m6 9 6 6 6-6"></path>
            </svg>
          </button>
          <div
            class="mobile-dropdown-menu hidden ml-4 space-y-2"
            data-dropdown-content="mobile-solutions"
          >
            <a
              href="#"
              class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
              >For Individuals</a
            >
            <a
              href="#"
              class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
              >For Businesses</a
            >
          </div>
        </div>

        <a
          href="#"
          class="block p-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg"
          >Pricing</a
        >
        <a
          href="#"
          class="block p-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg"
          >About</a
        >
        <a
          href="#"
          class="block p-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg"
          >Contact</a
        >

        <div class="pt-4 border-t border-white/10 space-y-3">
          <button
            class="w-full text-left px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded"
          >
            Sign In
          </button>
          <button
            class="w-full px-6 py-2 rounded text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg"
          >
            Get Started
          </button>
        </div>
      </nav>
    </div>
  </div>
</section>

<script>
  document.querySelectorAll('.dropdown-toggle').forEach((btn) => {
    btn.addEventListener('click', () => {
      const dropdown = btn.getAttribute('data-dropdown')
      const content = document.querySelector(
        `[data-dropdown-content="${dropdown}"]`
      )

      document.querySelectorAll('.dropdown-menu').forEach((menu) => {
        if (menu !== content) menu.classList.add('hidden')
      })

      content.classList.toggle('hidden')
    })
  })

  document.querySelectorAll('.mobile-dropdown-toggle').forEach((btn) => {
    btn.addEventListener('click', () => {
      const dropdown = btn.getAttribute('data-dropdown')
      const content = document.querySelector(
        `[data-dropdown-content="${dropdown}"]`
      )
      content.classList.toggle('hidden')
    })
  })

  const menuToggle = document.getElementById('menuToggle')
  const mobileMenu = document.getElementById('mobileMenu')

  menuToggle.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden')
    const icon = menuToggle.querySelector('i')
    icon.className = icon.classList.contains('lucide-menu')
      ? 'lucide-x w-6 h-6'
      : 'lucide-menu w-6 h-6'
  })
</script>
Header Fintech Glassmorphism

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
